{"id":887,"date":"2026-07-31T03:44:51","date_gmt":"2026-07-30T21:44:51","guid":{"rendered":"https:\/\/new.hyundaidemagna.com\/?page_id=887"},"modified":"2026-10-30T04:45:57","modified_gmt":"2026-10-29T22:45:57","slug":"camiones","status":"publish","type":"page","link":"https:\/\/new.hyundaidemagna.com\/?page_id=887","title":{"rendered":"Camiones"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"887\" class=\"elementor elementor-887\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-61c9869 e-con e-atomic-element e-flexbox-base e-default-div e-61c9869-1f624d0 yt-hero-shell \" data-id=\"61c9869\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"61c9869\" data-e-type=\"e-flexbox\" data-id=\"61c9869\">\n    \t\t<div class=\"elementor-element elementor-element-39aad8e elementor-widget elementor-widget-html\" data-id=\"39aad8e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"yt-hero-section\">\n  <div class=\"yt-hero-media\">\n    <div id=\"yt-hero-player\" class=\"yt-hero-player\"><\/div>\n  <\/div>\n\n  <div class=\"yt-hero-overlay\"><\/div>\n\n  <div class=\"yt-hero-content\">\n    <p class=\"yt-hero-subtitle\">Camion 1<\/p>\n\n    <h1 class=\"yt-hero-title\">Texto sobre camion 1<\/h1>\n\n    <div class=\"ytv-hero-actions\">\n      <a class=\"ytv-hero-btn ytv-hero-btn-primary\" href=\"https:\/\/new.hyundaidemagna.com\/#contacto\">\n        Conoce m\u00e1s <span aria-hidden=\"true\">\u2192<\/span>\n      <\/a>\n    <\/div>\n  <\/div>\n\n  <button\n    class=\"yt-hero-sound\"\n    type=\"button\"\n    aria-label=\"Activar sonido\"\n    aria-pressed=\"false\"\n  >\n    <span class=\"yt-hero-sound-icon\" aria-hidden=\"true\">\n      <svg viewBox=\"0 0 24 24\" focusable=\"false\">\n        <path\n          d=\"M11 5L6.5 9H3v6h3.5L11 19V5z\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.8\"\n          stroke-linejoin=\"round\"\n        \/>\n\n        <path\n          class=\"yt-sound-wave-1\"\n          d=\"M15 9.5c1.2 1.4 1.2 3.6 0 5\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.8\"\n          stroke-linecap=\"round\"\n        \/>\n\n        <path\n          class=\"yt-sound-wave-2\"\n          d=\"M18 7c2.7 2.8 2.7 7.2 0 10\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.8\"\n          stroke-linecap=\"round\"\n        \/>\n\n        <path\n          class=\"yt-sound-muted-x\"\n          d=\"M15.5 9.5l5 5m0-5l-5 5\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.8\"\n          stroke-linecap=\"round\"\n        \/>\n      <\/svg>\n    <\/span>\n  <\/button>\n\n  <div class=\"yt-hero-dots\" aria-label=\"Seleccionar video\">\n    <button\n      class=\"yt-hero-dot active\"\n      type=\"button\"\n      data-index=\"0\"\n      aria-label=\"Mostrar video 1\"\n      aria-pressed=\"true\"\n    ><\/button>\n  <\/div>\n<\/div>\n\n<style>\n\n.yt-hero-shell {\n  width: 100% !important;\n  max-width: 100% !important;\n  min-width: 0 !important;\n\n  margin: 0 !important;\n  padding: 0 !important;\n\n  overflow: hidden !important;\n\n  box-sizing: border-box !important;\n}\n\n.yt-hero-shell > .e-con-inner,\n.yt-hero-shell .elementor-widget-html,\n.yt-hero-shell .elementor-widget-container {\n  width: 100% !important;\n  max-width: 100% !important;\n  min-width: 0 !important;\n\n  margin: 0 !important;\n  padding: 0 !important;\n\n  box-sizing: border-box !important;\n}\n\n.yt-hero-section,\n.yt-hero-section * {\n  box-sizing: border-box;\n}\n\n.yt-hero-section {\n  position: relative;\n\n  isolation: isolate;\n\n  width: 100%;\n  max-width: 100%;\n  min-width: 0;\n\n  height: 100vh;\n  height: 100svh;\n\n  min-height: 650px;\n\n  margin: 0;\n  padding: 0;\n\n  overflow: hidden;\n\n  background: #000;\n}\n\n\n\/* =========================================\n   VIDEO\n========================================= *\/\n\n.yt-hero-media {\n  position: absolute;\n\n  inset: 0;\n\n  z-index: 1;\n\n  width: 100%;\n  height: 100%;\n\n  overflow: hidden;\n\n  background: #000;\n}\n\n#yt-hero-player,\n.yt-hero-player {\n  position: absolute;\n\n  top: 50%;\n  left: 50%;\n\n  width: 100%;\n  height: 100%;\n\n  max-width: none !important;\n\n  transform: translate(-50%, -50%);\n\n  border: 0;\n\n  pointer-events: none;\n}\n\n#yt-hero-player iframe,\niframe#yt-hero-player,\n.yt-hero-player iframe {\n  display: block;\n\n  width: 100%;\n  height: 100%;\n\n  max-width: none !important;\n\n  border: 0;\n\n  pointer-events: none;\n}\n\n\n\/* =========================================\n   OSCURECIMIENTO\n========================================= *\/\n\n.yt-hero-overlay {\n  position: absolute;\n\n  inset: 0;\n\n  z-index: 2;\n\n  background: linear-gradient(\n    90deg,\n    rgba(0, 0, 0, 0.72) 0%,\n    rgba(0, 0, 0, 0.45) 45%,\n    rgba(0, 0, 0, 0.18) 100%\n  );\n\n  pointer-events: none;\n}\n\n\n\/* =========================================\n   CONTENIDO\n========================================= *\/\n\n.yt-hero-content {\n  position: relative;\n\n  z-index: 3;\n\n  display: flex;\n\n  flex-direction: column;\n\n  justify-content: center;\n\n  width: 100%;\n\n  max-width: 1180px;\n\n  height: 100%;\n\n  margin: 0 auto;\n\n  padding: 0 40px;\n\n  color: #fff;\n\n  \/* Transici\u00f3n del texto y del bot\u00f3n *\/\n  opacity: 1;\n  visibility: visible;\n  transition: opacity 0.6s ease, visibility 0s;\n}\n\n\/* Ocultar juntos subt\u00edtulo, t\u00edtulo y bot\u00f3n *\/\n.yt-hero-content.yt-hero-content-hidden {\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n  transition: opacity 0.6s ease, visibility 0s linear 0.6s;\n}\n\n.yt-hero-subtitle {\n  margin: 0 0 14px;\n\n  color: #fff;\n\n  font-family: Roboto, Arial, sans-serif;\n\n  font-size: 16px;\n\n  font-weight: 700;\n\n  line-height: 1.4;\n\n  letter-spacing: 0.12em;\n\n  text-transform: uppercase;\n}\n\n.yt-hero-title {\n  width: 100%;\n\n  max-width: 760px;\n\n  margin: 0 0 28px;\n\n  color: #fff;\n\n  font-family: Roboto, Arial, sans-serif;\n\n  font-size: clamp(42px, 6vw, 82px);\n\n  font-weight: 800;\n\n  line-height: 0.98;\n\n  overflow-wrap: break-word;\n}\n\n\n\/* =========================================\n   BOT\u00d3N CONOCE M\u00c1S\n========================================= *\/\n\n.ytv-hero-actions {\n  display: flex;\n\n  flex-wrap: wrap;\n\n  gap: 14px;\n}\n\n.ytv-hero-btn {\n  display: inline-flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  gap: 10px;\n\n  min-width: 145px;\n\n  padding: 15px 30px;\n\n  border-radius: 2px;\n\n  font-family: Roboto, Arial, sans-serif;\n\n  font-size: 15px;\n\n  font-weight: 800;\n\n  line-height: 1;\n\n  text-decoration: none;\n\n  cursor: pointer;\n\n  transition:\n    background-size 0.38s cubic-bezier(0.65, 0, 0.35, 1),\n    color 0.25s ease,\n    border-color 0.25s ease,\n    transform 0.25s ease,\n    box-shadow 0.25s ease;\n}\n\n.ytv-hero-btn-primary {\n  color: #002c5f;\n\n  border: 2px solid #fff;\n\n  background-color: #fff;\n\n  background-image: linear-gradient(\n    to right,\n    #002c5f 0%,\n    #002c5f 100%\n  );\n\n  background-repeat: no-repeat;\n\n  background-position: left center;\n\n  background-size: 0% 100%;\n}\n\n.ytv-hero-btn-primary:hover,\n.ytv-hero-btn-primary:focus {\n  color: #fff;\n\n  border-color: #002c5f;\n\n  background-size: 100% 100%;\n\n  transform: translate(-2px, -2px);\n\n  box-shadow:\n    5px 5px 0 #35719e,\n    0 12px 24px rgba(0, 44, 95, 0.24);\n}\n\n.ytv-hero-btn:focus-visible {\n  outline: 3px solid rgba(255, 255, 255, 0.45);\n\n  outline-offset: 4px;\n}\n\n.ytv-hero-btn span {\n  transition: transform 0.25s ease;\n}\n\n.ytv-hero-btn:hover span,\n.ytv-hero-btn:focus span {\n  transform: translateX(4px);\n}\n\n\n\/* =========================================\n   BOT\u00d3N DE AUDIO\n========================================= *\/\n\n.yt-hero-section button.yt-hero-sound {\n  -webkit-appearance: none !important;\n\n  appearance: none !important;\n\n  position: absolute !important;\n\n  right: 28px !important;\n\n  bottom: 62px !important;\n\n  z-index: 10 !important;\n\n  display: flex !important;\n\n  align-items: center !important;\n\n  justify-content: center !important;\n\n  flex: 0 0 44px !important;\n\n  width: 44px !important;\n\n  min-width: 44px !important;\n\n  max-width: 44px !important;\n\n  height: 44px !important;\n\n  min-height: 44px !important;\n\n  max-height: 44px !important;\n\n  margin: 0 !important;\n\n  padding: 0 !important;\n\n  color: #fff !important;\n\n  font-size: 0 !important;\n\n  line-height: 0 !important;\n\n  border: 1px solid rgba(255, 255, 255, 0.78) !important;\n\n  border-radius: 50% !important;\n\n  background: rgba(0, 0, 0, 0.42) !important;\n\n  background-image: none !important;\n\n  box-shadow: none !important;\n\n  text-shadow: none !important;\n\n  opacity: 1 !important;\n\n  overflow: hidden !important;\n\n  cursor: pointer !important;\n\n  transform: none !important;\n\n  touch-action: manipulation;\n\n  backdrop-filter: blur(6px);\n\n  -webkit-backdrop-filter: blur(6px);\n\n  transition:\n    background-color 0.25s ease,\n    border-color 0.25s ease,\n    transform 0.25s ease,\n    box-shadow 0.25s ease !important;\n}\n\n.yt-hero-section button.yt-hero-sound::before,\n.yt-hero-section button.yt-hero-sound::after {\n  content: none !important;\n\n  display: none !important;\n}\n\n.yt-hero-section button.yt-hero-sound:hover,\n.yt-hero-section button.yt-hero-sound:focus {\n  background: rgba(0, 44, 95, 0.88) !important;\n\n  border-color: #fff !important;\n\n  transform: scale(1.06) !important;\n\n  box-shadow: 3px 3px 0 #35719e !important;\n}\n\n.yt-hero-section button.yt-hero-sound:focus-visible {\n  outline: 3px solid rgba(255, 255, 255, 0.45) !important;\n\n  outline-offset: 4px !important;\n}\n\n.yt-hero-sound-icon {\n  display: flex !important;\n\n  align-items: center !important;\n\n  justify-content: center !important;\n\n  width: 22px !important;\n\n  height: 22px !important;\n\n  margin: 0 !important;\n\n  padding: 0 !important;\n\n  transform: none !important;\n\n  pointer-events: none !important;\n}\n\n.yt-hero-sound-icon svg {\n  display: block !important;\n\n  width: 22px !important;\n\n  min-width: 22px !important;\n\n  max-width: 22px !important;\n\n  height: 22px !important;\n\n  min-height: 22px !important;\n\n  max-height: 22px !important;\n\n  margin: 0 !important;\n\n  padding: 0 !important;\n\n  fill: none !important;\n\n  stroke: currentColor;\n\n  overflow: visible !important;\n\n  pointer-events: none !important;\n}\n\n.yt-sound-wave-1,\n.yt-sound-wave-2 {\n  display: none;\n}\n\n.yt-sound-muted-x {\n  display: block;\n}\n\n.yt-hero-sound.sound-on .yt-sound-wave-1,\n.yt-hero-sound.sound-on .yt-sound-wave-2 {\n  display: block;\n}\n\n.yt-hero-sound.sound-on .yt-sound-muted-x {\n  display: none;\n}\n\n\n\/* =========================================\n   PUNTOS\n========================================= *\/\n\n.yt-hero-section .yt-hero-dots {\n  position: absolute !important;\n\n  right: 28px !important;\n\n  bottom: 28px !important;\n\n  z-index: 10 !important;\n\n  display: flex !important;\n\n  align-items: center !important;\n\n  justify-content: flex-end !important;\n\n  flex-wrap: nowrap !important;\n\n  width: auto !important;\n\n  min-width: 0 !important;\n\n  max-width: none !important;\n\n  height: auto !important;\n\n  min-height: 0 !important;\n\n  max-height: none !important;\n\n  margin: 0 !important;\n\n  padding: 0 !important;\n\n  gap: 8px !important;\n\n  background: transparent !important;\n\n  border: 0 !important;\n\n  box-shadow: none !important;\n}\n\n.yt-hero-section button.yt-hero-dot {\n  -webkit-appearance: none !important;\n\n  appearance: none !important;\n\n  position: relative !important;\n\n  display: block !important;\n\n  flex: 0 0 10px !important;\n\n  width: 10px !important;\n\n  min-width: 10px !important;\n\n  max-width: 10px !important;\n\n  height: 10px !important;\n\n  min-height: 10px !important;\n\n  max-height: 10px !important;\n\n  margin: 0 !important;\n\n  padding: 0 !important;\n\n  color: transparent !important;\n\n  font-size: 0 !important;\n\n  line-height: 0 !important;\n\n  border: 1px solid rgba(255, 255, 255, 0.85) !important;\n\n  border-radius: 1px !important;\n\n  background: transparent !important;\n\n  background-image: none !important;\n\n  box-shadow: none !important;\n\n  text-shadow: none !important;\n\n  opacity: 1 !important;\n\n  overflow: hidden !important;\n\n  cursor: pointer !important;\n\n  transform: none !important;\n\n  touch-action: manipulation;\n\n  transition:\n    background-color 0.25s ease,\n    border-color 0.25s ease,\n    transform 0.25s ease,\n    box-shadow 0.25s ease !important;\n}\n\n.yt-hero-section button.yt-hero-dot::before,\n.yt-hero-section button.yt-hero-dot::after {\n  content: none !important;\n\n  display: none !important;\n}\n\n.yt-hero-section button.yt-hero-dot:hover,\n.yt-hero-section button.yt-hero-dot:focus {\n  background: rgba(255, 255, 255, 0.45) !important;\n\n  border-color: #fff !important;\n\n  transform: translateY(-2px) !important;\n}\n\n.yt-hero-section button.yt-hero-dot.active {\n  background: #fff !important;\n\n  border-color: #fff !important;\n\n  box-shadow: 2px 2px 0 #35719e !important;\n}\n\n.yt-hero-section button.yt-hero-dot:focus-visible {\n  outline: 3px solid rgba(255, 255, 255, 0.45) !important;\n\n  outline-offset: 4px !important;\n}\n\n\n\/* =========================================\n   TABLET\n========================================= *\/\n\n@media (max-width: 1024px) {\n  .yt-hero-content {\n    padding-right: 32px;\n\n    padding-left: 32px;\n  }\n\n  .yt-hero-title {\n    max-width: 680px;\n  }\n}\n\n\n\/* =========================================\n   M\u00d3VIL\n========================================= *\/\n\n@media (max-width: 767px) {\n  .yt-hero-section {\n    height: 100vh;\n\n    height: 100svh;\n\n    min-height: 600px;\n  }\n\n  .yt-hero-content {\n    padding-right: 24px;\n\n    padding-left: 24px;\n  }\n\n  .yt-hero-subtitle {\n    margin-bottom: 12px;\n\n    font-size: 13px;\n  }\n\n  .yt-hero-title {\n    max-width: 100%;\n\n    margin-bottom: 24px;\n\n    font-size: clamp(38px, 11vw, 52px);\n\n    line-height: 1;\n  }\n\n  .ytv-hero-actions {\n    width: 100%;\n  }\n\n  .ytv-hero-btn {\n    width: fit-content;\n\n    min-width: 135px;\n\n    padding: 13px 26px;\n\n    font-size: 14px;\n  }\n\n  .yt-hero-section button.yt-hero-sound {\n    right: 20px !important;\n\n    bottom: 56px !important;\n\n    flex-basis: 40px !important;\n\n    width: 40px !important;\n\n    min-width: 40px !important;\n\n    max-width: 40px !important;\n\n    height: 40px !important;\n\n    min-height: 40px !important;\n\n    max-height: 40px !important;\n  }\n\n  .yt-hero-sound-icon,\n  .yt-hero-sound-icon svg {\n    width: 20px !important;\n\n    min-width: 20px !important;\n\n    max-width: 20px !important;\n\n    height: 20px !important;\n\n    min-height: 20px !important;\n\n    max-height: 20px !important;\n  }\n\n  .yt-hero-section .yt-hero-dots {\n    right: 20px !important;\n\n    bottom: 23px !important;\n\n    gap: 7px !important;\n  }\n\n  .yt-hero-section button.yt-hero-dot,\n  .yt-hero-section button.yt-hero-dot:hover,\n  .yt-hero-section button.yt-hero-dot:focus,\n  .yt-hero-section button.yt-hero-dot.active {\n    flex-basis: 9px !important;\n\n    width: 9px !important;\n\n    min-width: 9px !important;\n\n    max-width: 9px !important;\n\n    height: 9px !important;\n\n    min-height: 9px !important;\n\n    max-height: 9px !important;\n  }\n}\n\n\n\/* =========================================\n   REDUCIR ANIMACIONES\n========================================= *\/\n\n@media (prefers-reduced-motion: reduce) {\n  .yt-hero-content,\n  .yt-hero-content.yt-hero-content-hidden {\n    transition: none !important;\n  }\n\n  .ytv-hero-btn,\n  .ytv-hero-btn span,\n  .yt-hero-section button.yt-hero-dot,\n  .yt-hero-section button.yt-hero-sound {\n    transition: none !important;\n  }\n}\n\n<\/style>\n\n\n<script>\n(function () {\n\n  \"use strict\";\n\n\n  const hero =\n    document.querySelector(\n      \".yt-hero-section\"\n    );\n\n\n  if (\n    !hero ||\n    hero.dataset.ytHeroInitialized === \"true\"\n  ) {\n\n    return;\n\n  }\n\n\n  hero.dataset.ytHeroInitialized =\n    \"true\";\n\n\n  \/* =========================================\n     VIDEOS\n  ========================================= *\/\n\n  const videos = [\n\n\n    {\n      id: \"ODLCv5vkGH8\",\n\n      title:\n        \"Tu negocio, en movimiento\",\n\n    },\n\n\n  ];\n\n\n  \/* =========================================\n     ELEMENTOS\n  ========================================= *\/\n\n  const playerElement =\n    hero.querySelector(\n      \"#yt-hero-player\"\n    );\n\n\n  const heroContentElement =\n    hero.querySelector(\n      \".yt-hero-content\"\n    );\n\n\n  const titleElement =\n    hero.querySelector(\n      \".yt-hero-title\"\n    );\n\n\n  const subtitleElement =\n    hero.querySelector(\n      \".yt-hero-subtitle\"\n    );\n\n\n  const dots =\n    Array.from(\n      hero.querySelectorAll(\n        \".yt-hero-dot\"\n      )\n    );\n\n\n  const soundButton =\n    hero.querySelector(\n      \".yt-hero-sound\"\n    );\n\n\n  \/* =========================================\n     VARIABLES\n  ========================================= *\/\n\n  let currentVideo = 0;\n\n  let player = null;\n\n  let resizeObserver = null;\n\n  let isMuted = true;\n\n  \/* Duraci\u00f3n del contenido de cada video: 10 segundos *\/\n  const HERO_TEXT_DURATION = 10000;\n\n  let heroTextTimeout = null;\n  let waitingForVideoStart = true;\n\n\n  \/* =========================================\n     MOSTRAR \/ OCULTAR TEXTO Y BOT\u00d3N\n  ========================================= *\/\n\n  function showHeroContent() {\n    if (heroTextTimeout !== null) {\n      window.clearTimeout(heroTextTimeout);\n      heroTextTimeout = null;\n    }\n\n    waitingForVideoStart = true;\n\n    if (heroContentElement) {\n      heroContentElement.classList.remove(\n        \"yt-hero-content-hidden\"\n      );\n    }\n  }\n\n\n  function startHeroTextTimer() {\n    \/\/ Solo comenzar una vez por video, al iniciar reproducci\u00f3n.\n    if (!waitingForVideoStart) {\n      return;\n    }\n\n    waitingForVideoStart = false;\n\n    heroTextTimeout = window.setTimeout(\n      function () {\n        heroTextTimeout = null;\n\n        if (heroContentElement) {\n          heroContentElement.classList.add(\n            \"yt-hero-content-hidden\"\n          );\n        }\n      },\n      HERO_TEXT_DURATION\n    );\n  }\n\n\n  \/* =========================================\n     AJUSTAR VIDEO\n  ========================================= *\/\n\n  function fitVideoToHero() {\n\n    if (\n      !player ||\n      typeof player.getIframe !==\n        \"function\"\n    ) {\n\n      return;\n\n    }\n\n\n    const iframe =\n      player.getIframe();\n\n\n    if (!iframe) {\n\n      return;\n\n    }\n\n\n    const heroWidth =\n      hero.clientWidth;\n\n\n    const heroHeight =\n      hero.clientHeight;\n\n\n    const videoRatio =\n      16 \/ 9;\n\n\n    let videoWidth =\n      heroWidth;\n\n\n    let videoHeight =\n      videoWidth \/\n      videoRatio;\n\n\n    if (\n      videoHeight <\n      heroHeight\n    ) {\n\n      videoHeight =\n        heroHeight;\n\n\n      videoWidth =\n        videoHeight *\n        videoRatio;\n\n    }\n\n\n    iframe.style.width =\n      Math.ceil(\n        videoWidth\n      ) + \"px\";\n\n\n    iframe.style.height =\n      Math.ceil(\n        videoHeight\n      ) + \"px\";\n\n\n    iframe.style.maxWidth =\n      \"none\";\n\n\n    iframe.style.position =\n      \"absolute\";\n\n\n    iframe.style.top =\n      \"50%\";\n\n\n    iframe.style.left =\n      \"50%\";\n\n\n    iframe.style.transform =\n      \"translate(-50%, -50%)\";\n\n  }\n\n\n  \/* =========================================\n     ACTUALIZAR CONTENIDO\n  ========================================= *\/\n\n  function updateHeroContent() {\n\n    const selectedVideo =\n      videos[currentVideo];\n\n\n    \/* El bot\u00f3n \"Conoce m\u00e1s\" solo se muestra en el primer video. *\/\n    const actionsElement = hero.querySelector(\".ytv-hero-actions\");\n\n    if (actionsElement) {\n      actionsElement.style.display = currentVideo === 0 ? \"\" : \"none\";\n    }\n\n\n    if (titleElement) {\n\n      titleElement.textContent =\n        selectedVideo.title || \"\";\n\n    }\n\n\n    if (subtitleElement) {\n\n      subtitleElement.textContent =\n        selectedVideo.subtitle || \"\";\n\n    }\n\n\n    dots.forEach(\n      function (\n        dot,\n        index\n      ) {\n\n        const isActive =\n          index ===\n          currentVideo;\n\n\n        dot.classList.toggle(\n          \"active\",\n          isActive\n        );\n\n\n        dot.setAttribute(\n          \"aria-pressed\",\n          isActive\n            ? \"true\"\n            : \"false\"\n        );\n\n      }\n    );\n\n  }\n\n\n  \/* =========================================\n     BOT\u00d3N DE AUDIO\n  ========================================= *\/\n\n  function updateSoundButton() {\n\n    if (!soundButton) {\n\n      return;\n\n    }\n\n\n    if (isMuted) {\n\n      soundButton.classList.remove(\n        \"sound-on\"\n      );\n\n\n      soundButton.setAttribute(\n        \"aria-label\",\n        \"Activar sonido\"\n      );\n\n\n      soundButton.setAttribute(\n        \"aria-pressed\",\n        \"false\"\n      );\n\n    }\n\n    else {\n\n      soundButton.classList.add(\n        \"sound-on\"\n      );\n\n\n      soundButton.setAttribute(\n        \"aria-label\",\n        \"Silenciar sonido\"\n      );\n\n\n      soundButton.setAttribute(\n        \"aria-pressed\",\n        \"true\"\n      );\n\n    }\n\n  }\n\n\n  function applySoundState() {\n\n    if (!player) {\n\n      return;\n\n    }\n\n\n    if (isMuted) {\n\n      player.mute();\n\n    }\n\n    else {\n\n      player.unMute();\n\n      player.setVolume(\n        100\n      );\n\n    }\n\n\n    updateSoundButton();\n\n  }\n\n\n  function toggleSound() {\n\n    if (!player) {\n\n      return;\n\n    }\n\n\n    isMuted =\n      !isMuted;\n\n\n    applySoundState();\n\n\n    if (\n      typeof player.playVideo ===\n      \"function\"\n    ) {\n\n      player.playVideo();\n\n    }\n\n  }\n\n\n  \/* =========================================\n     INTENTAR OCULTAR SUBT\u00cdTULOS DE YOUTUBE\n  ========================================= *\/\n\n  function tryDisableYouTubeCaptions() {\n\n    if (!player) {\n\n      return;\n\n    }\n\n\n    \/*\n     * YouTube puede conservar la preferencia\n     * de subt\u00edtulos del usuario.\n     *\n     * Intentamos quitar la pista de captions.\n     *\/\n\n    try {\n\n      if (\n        typeof player.unloadModule ===\n        \"function\"\n      ) {\n\n        player.unloadModule(\n          \"captions\"\n        );\n\n      }\n\n    }\n\n    catch (error) {\n\n      \/*\n       * No detenemos el video.\n       *\/\n\n    }\n\n\n    try {\n\n      if (\n        typeof player.setOption ===\n        \"function\"\n      ) {\n\n        player.setOption(\n          \"captions\",\n          \"track\",\n          {}\n        );\n\n      }\n\n    }\n\n    catch (error) {\n\n      \/*\n       * Algunos reproductores no permiten\n       * modificar esta opci\u00f3n.\n       *\/\n\n    }\n\n  }\n\n\n  \/* =========================================\n     REPRODUCIR VIDEO\n  ========================================= *\/\n\n  function playVideo(index) {\n\n    currentVideo =\n      (\n        index +\n        videos.length\n      ) %\n      videos.length;\n\n\n    updateHeroContent();\n\n    \/\/ Mostrar texto y bot\u00f3n cuando se selecciona otro video.\n    showHeroContent();\n\n\n    if (\n      !player ||\n      typeof player.loadVideoById !==\n        \"function\"\n    ) {\n\n      return;\n\n    }\n\n\n    player.loadVideoById({\n\n      videoId:\n        videos[\n          currentVideo\n        ].id,\n\n      suggestedQuality:\n        \"hd1080\"\n\n    });\n\n\n    window.setTimeout(\n\n      function () {\n\n        if (!player) {\n\n          return;\n\n        }\n\n\n        applySoundState();\n\n\n        tryDisableYouTubeCaptions();\n\n\n        player.playVideo();\n\n\n        fitVideoToHero();\n\n\n        \/*\n         * YouTube puede cargar los captions\n         * unos milisegundos despu\u00e9s.\n         *\/\n\n        window.setTimeout(\n          tryDisableYouTubeCaptions,\n          150\n        );\n\n\n        window.setTimeout(\n          tryDisableYouTubeCaptions,\n          600\n        );\n\n      },\n\n      350\n\n    );\n\n  }\n\n\n  \/* =========================================\n     SIGUIENTE VIDEO\n  ========================================= *\/\n\n  function playNextVideo() {\n\n    playVideo(\n      currentVideo + 1\n    );\n\n  }\n\n\n  \/* =========================================\n     CREAR REPRODUCTOR\n  ========================================= *\/\n\n  function createPlayer() {\n\n    if (\n      player ||\n      !playerElement ||\n      !window.YT ||\n      typeof window.YT.Player !==\n        \"function\"\n    ) {\n\n      return;\n\n    }\n\n\n    player =\n      new window.YT.Player(\n\n        playerElement,\n\n        {\n\n          videoId:\n            videos[\n              currentVideo\n            ].id,\n\n\n          playerVars: {\n\n            autoplay: 1,\n\n            controls: 0,\n\n            mute: 1,\n\n\n            \/*\n             * No forzamos subt\u00edtulos.\n             *\/\n\n            cc_load_policy: 0,\n\n\n            rel: 0,\n\n            playsinline: 1,\n\n            modestbranding: 1,\n\n            iv_load_policy: 3,\n\n            disablekb: 1,\n\n            fs: 0\n\n          },\n\n\n          events: {\n\n\n            \/* =============================\n               VIDEO LISTO\n            ============================= *\/\n\n            onReady:\n              function (event) {\n\n\n                isMuted = true;\n\n\n                event.target.mute();\n\n\n                event.target.setVolume(\n                  100\n                );\n\n\n                showHeroContent();\n\n                event.target.playVideo();\n\n\n                tryDisableYouTubeCaptions();\n\n\n                updateSoundButton();\n\n\n                updateHeroContent();\n\n\n                fitVideoToHero();\n\n\n                window.requestAnimationFrame(\n                  fitVideoToHero\n                );\n\n\n                window.setTimeout(\n                  fitVideoToHero,\n                  300\n                );\n\n\n                window.setTimeout(\n                  fitVideoToHero,\n                  1000\n                );\n\n\n                window.setTimeout(\n                  tryDisableYouTubeCaptions,\n                  150\n                );\n\n\n                window.setTimeout(\n                  tryDisableYouTubeCaptions,\n                  600\n                );\n\n              },\n\n\n            \/* =============================\n               CAMBIO DE M\u00d3DULOS DE YOUTUBE\n            ============================= *\/\n\n            onApiChange:\n              function () {\n\n                tryDisableYouTubeCaptions();\n\n              },\n\n\n            \/* =============================\n               VIDEO TERMINADO\n            ============================= *\/\n\n            onStateChange:\n              function (event) {\n\n                if (\n                  window.YT &&\n                  event.data ===\n                    window.YT\n                      .PlayerState\n                      .PLAYING\n                ) {\n                  startHeroTextTimer();\n                }\n\n                if (\n                  window.YT &&\n                  event.data ===\n                    window.YT\n                      .PlayerState\n                      .ENDED\n                ) {\n\n                  playNextVideo();\n\n                }\n\n              },\n\n\n            \/* =============================\n               ERROR DEL VIDEO\n            ============================= *\/\n\n            onError:\n              function (event) {\n\n\n                console.warn(\n                  \"Error de YouTube:\",\n                  event &&\n                  event.data,\n                  \"Video:\",\n                  videos[\n                    currentVideo\n                  ] &&\n                  videos[\n                    currentVideo\n                  ].id\n                );\n\n\n                \/*\n                 * Si un video no puede\n                 * reproducirse, vamos al siguiente.\n                 *\/\n\n                playNextVideo();\n\n              }\n\n          }\n\n        }\n\n      );\n\n  }\n\n\n  \/* =========================================\n     CARGAR API DE YOUTUBE\n  ========================================= *\/\n\n  function loadYouTubeAPI() {\n\n    if (\n      window.YT &&\n      typeof window.YT.Player ===\n        \"function\"\n    ) {\n\n      createPlayer();\n\n      return;\n\n    }\n\n\n    const previousCallback =\n      window.onYouTubeIframeAPIReady;\n\n\n    window.onYouTubeIframeAPIReady =\n      function () {\n\n\n        if (\n          typeof previousCallback ===\n          \"function\"\n        ) {\n\n          previousCallback();\n\n        }\n\n\n        createPlayer();\n\n      };\n\n\n    const existingScript =\n      document.querySelector(\n        'script[src=\"https:\/\/www.youtube.com\/iframe_api\"]'\n      );\n\n\n    if (!existingScript) {\n\n      const script =\n        document.createElement(\n          \"script\"\n        );\n\n\n      script.src =\n        \"https:\/\/www.youtube.com\/iframe_api\";\n\n\n      script.async =\n        true;\n\n\n      document.head.appendChild(\n        script\n      );\n\n    }\n\n  }\n\n\n  \/* =========================================\n     CLIC EN AUDIO\n  ========================================= *\/\n\n  if (soundButton) {\n\n    soundButton.addEventListener(\n\n      \"click\",\n\n      function (event) {\n\n        event.preventDefault();\n\n        event.stopPropagation();\n\n        toggleSound();\n\n      }\n\n    );\n\n  }\n\n\n  \/* =========================================\n     CLIC EN PUNTOS\n  ========================================= *\/\n\n  dots.forEach(\n\n    function (dot) {\n\n      dot.addEventListener(\n\n        \"click\",\n\n        function (event) {\n\n          event.preventDefault();\n\n          event.stopPropagation();\n\n\n          const index =\n            Number(\n              dot.dataset.index\n            );\n\n\n          if (\n            Number.isInteger(\n              index\n            )\n          ) {\n\n            playVideo(\n              index\n            );\n\n          }\n\n        }\n\n      );\n\n    }\n\n  );\n\n\n  \/* =========================================\n     RESPONSIVE\n  ========================================= *\/\n\n  window.addEventListener(\n\n    \"resize\",\n\n    fitVideoToHero,\n\n    {\n      passive: true\n    }\n\n  );\n\n\n  if (\n    \"ResizeObserver\" in window\n  ) {\n\n    resizeObserver =\n      new ResizeObserver(\n\n        function () {\n\n          fitVideoToHero();\n\n        }\n\n      );\n\n\n    resizeObserver.observe(\n      hero\n    );\n\n  }\n\n\n  \/* =========================================\n     INICIO\n  ========================================= *\/\n\n  updateSoundButton();\n\n  updateHeroContent();\n\n  loadYouTubeAPI();\n\n\n})();\n\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-ca00332 e-grid e-con-boxed e-con e-parent\" data-id=\"ca00332\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ae3c95d elementor-widget elementor-widget-html\" data-id=\"ae3c95d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"es\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>Hyundai Magna \u2014 Encabezado de operaciones<\/title>\r\n<style>\r\n*{box-sizing:border-box}\r\n\r\nbody{\r\n    margin:0;\r\n    background:#F5F7F9;\r\n    font-family:Roboto,Arial,sans-serif;\r\n}\r\n\r\n.hdm-operations-heading-section{\r\n    --hdm-navy:#002C5F;\r\n    --hdm-blue:#35719E;\r\n    --hdm-gray:#F5F7F9;\r\n\r\n    width:100%;\r\n    padding:42px 8px 34px;\r\n    background:var(--hdm-gray);\r\n}\r\n\r\n.hdm-operations-heading{\r\n    width:100%;\r\n    max-width:620px;\r\n    margin:0;\r\n}\r\n\r\n.hdm-operations-eyebrow{\r\n    display:inline-flex;\r\n    align-items:center;\r\n    gap:10px;\r\n    margin-bottom:24px;\r\n    color:var(--hdm-blue);\r\n    font-size:12px;\r\n    font-weight:900;\r\n    line-height:1;\r\n    letter-spacing:.11em;\r\n    text-transform:uppercase;\r\n}\r\n\r\n.hdm-operations-eyebrow::before{\r\n    content:\"\";\r\n    display:block;\r\n    width:36px;\r\n    height:3px;\r\n    background:var(--hdm-blue);\r\n}\r\n\r\n.hdm-operations-title{\r\n    margin:0;\r\n    color:var(--hdm-navy);\r\n    font-size:clamp(48px,8vw,68px);\r\n    font-weight:900;\r\n    line-height:.94;\r\n    letter-spacing:-.05em;\r\n}\r\n\r\n@media(max-width:600px){\r\n    .hdm-operations-heading-section{\r\n        padding:34px 8px 28px;\r\n    }\r\n\r\n    .hdm-operations-eyebrow{\r\n        font-size:11px;\r\n        margin-bottom:20px;\r\n    }\r\n\r\n    .hdm-operations-eyebrow::before{\r\n        width:34px;\r\n    }\r\n\r\n    .hdm-operations-title{\r\n        font-size:clamp(42px,13vw,58px);\r\n    }\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section\r\n    class=\"hdm-operations-heading-section\"\r\n    aria-labelledby=\"hdm-operations-title\"\r\n>\r\n    <div class=\"hdm-operations-heading\">\r\n\r\n        <span class=\"hdm-operations-eyebrow\">\r\n            NUESTRA L\u00cdNEA DE CAMIONES\r\n        <\/span>\r\n\r\n        <h2\r\n            class=\"hdm-operations-title\"\r\n            id=\"hdm-operations-title\"\r\n        >\r\n            Encuentra el cami\u00f3n<br>\r\n            ideal para tu<br>\r\n            operaci\u00f3n\r\n        <\/h2>\r\n\r\n    <\/div>\r\n<\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c8d19d1 elementor-widget elementor-widget-text-editor\" data-id=\"c8d19d1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p style=\"margin: 0; color: #333333; font-family: Roboto, Arial, sans-serif; font-size: 17px; font-weight: 400; line-height: 1.75;\">\n    Desde entregas urbanas hasta operaciones de carga exigentes,\n    encuentra el cami\u00f3n Hyundai que mejor se adapta a las necesidades,\n    recorridos y objetivos de\n    <strong style=\"color: #002C5F; font-weight: 900;\">tu empresa.<\/strong>\n<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7b1adf9 e-grid e-con-boxed e-con e-parent\" data-id=\"7b1adf9\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-ea07ad1 e-con e-atomic-element e-div-block-base e-default-div e-ea07ad1-049f9df \" data-id=\"ea07ad1\" data-element_type=\"e-div-block\" data-e-type=\"e-div-block\" data-interaction-id=\"ea07ad1\" data-e-type=\"e-div-block\" data-id=\"ea07ad1\">\n    \t\t<div class=\"elementor-element elementor-element-6832141 elementor-widget elementor-widget-html\" data-id=\"6832141\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\n.hdm-ex8-card-stage {\n  --hdm-ex8-navy: #002c5f;\n  --hdm-ex8-blue: #35719e;\n  --hdm-ex8-light-blue: #c8dce9;\n  --hdm-ex8-text: #333333;\n  --hdm-ex8-muted: #66727d;\n  --hdm-ex8-white: #ffffff;\n  --hdm-ex8-soft: #f6f8fa;\n  --hdm-ex8-border: #cfd9e2;\n\n  --hdm-ex8-depth-x: 8px;\n  --hdm-ex8-depth-y: 8px;\n\n  width: 326px;\n  max-width: 100%;\n  min-width: 0;\n\n  margin: 0 auto;\n\n  padding-right: var(--hdm-ex8-depth-x);\n  padding-bottom: var(--hdm-ex8-depth-y);\n\n  font-family: Arial, Helvetica, sans-serif;\n  color: var(--hdm-ex8-text);\n}\n\n\n\/* =========================================================\n   BOX SIZING\n   ========================================================= *\/\n\n.hdm-ex8-card-stage,\n.hdm-ex8-card-stage * {\n  box-sizing: border-box;\n}\n\n\n\/* =========================================================\n   TARJETA PRINCIPAL\n   ========================================================= *\/\n\n.hdm-ex8-truck-card {\n  position: relative;\n  z-index: 1;\n\n  width: 100%;\n  min-width: 0;\n  min-height: 665px;\n\n  display: flex;\n  flex-direction: column;\n\n  background: var(--hdm-ex8-white);\n\n  border: 1px solid var(--hdm-ex8-border);\n  border-top: 5px solid var(--hdm-ex8-blue);\n\n  border-radius: 1px;\n\n  box-shadow:\n    var(--hdm-ex8-depth-x)\n    var(--hdm-ex8-depth-y)\n    0\n    var(--hdm-ex8-navy),\n\n    0 14px 28px\n    rgba(0, 44, 95, 0.06);\n\n  transform: translate3d(0, 0, 0);\n\n  transition:\n    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),\n    box-shadow 0.34s cubic-bezier(0.22, 1, 0.36, 1),\n    border-color 0.25s ease;\n}\n\n\n\/* =========================================================\n   HOVER TARJETA\n   ========================================================= *\/\n\n.hdm-ex8-truck-card:hover {\n  border-color: rgba(0, 44, 95, 0.34);\n\n  transform: translate3d(-4px, -4px, 0);\n\n  box-shadow:\n    12px 12px 0 var(--hdm-ex8-navy),\n\n    0 22px 42px\n    rgba(0, 44, 95, 0.14);\n}\n\n\n\/* =========================================================\n   L\u00cdNEA DERECHA\n   ========================================================= *\/\n\n.hdm-ex8-truck-card::after {\n  content: \"\";\n\n  position: absolute;\n\n  top: 0;\n  right: -1px;\n  bottom: 0;\n\n  z-index: 4;\n\n  width: 1px;\n\n  background:\n    rgba(255, 255, 255, 0.55);\n\n  pointer-events: none;\n}\n\n\n\/* =========================================================\n   \u00c1REA DE IMAGEN\n   ========================================================= *\/\n\n.hdm-ex8-truck-media {\n  position: relative;\n\n  min-height: 282px;\n\n  overflow: hidden;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  padding:\n    42px\n    24px\n    26px;\n\n  background:\n    linear-gradient(\n      180deg,\n      #ffffff 0%,\n      #f7f9fb 100%\n    );\n}\n\n\n\/* =========================================================\n   FIGURA GEOM\u00c9TRICA DERECHA\n   ========================================================= *\/\n\n.hdm-ex8-truck-media::before {\n  content: \"\";\n\n  position: absolute;\n\n  right: -77px;\n  bottom: -102px;\n\n  width: 235px;\n  height: 235px;\n\n  border:\n    1px solid\n    rgba(53, 113, 158, 0.26);\n\n  transform:\n    rotate(54deg);\n\n  transform-origin: center;\n\n  transition:\n    transform 0.46s cubic-bezier(0.22, 1, 0.36, 1),\n    border-color 0.30s ease;\n}\n\n\n\/* =========================================================\n   L\u00cdNEA AZUL INFERIOR\n   ========================================================= *\/\n\n.hdm-ex8-truck-media::after {\n  content: \"\";\n\n  position: absolute;\n\n  left: 28px;\n  bottom: 24px;\n\n  width: 120px;\n  height: 4px;\n\n  background:\n    var(--hdm-ex8-blue);\n\n  transition:\n    width 0.34s ease,\n    transform 0.34s ease;\n}\n\n\n\/* =========================================================\n   HOVER ELEMENTOS MEDIA\n   ========================================================= *\/\n\n.hdm-ex8-truck-card:hover\n.hdm-ex8-truck-media::before {\n\n  border-color:\n    rgba(53, 113, 158, 0.42);\n\n  transform:\n    rotate(60deg)\n    scale(1.06);\n}\n\n\n.hdm-ex8-truck-card:hover\n.hdm-ex8-truck-media::after {\n\n  width: 145px;\n\n  transform:\n    translateX(4px);\n}\n\n\n\/* =========================================================\n   ETIQUETA HYUNDAI TRUCKS\n   ========================================================= *\/\n\n.hdm-ex8-truck-label {\n  position: absolute;\n\n  top: 18px;\n  left: 24px;\n\n  z-index: 3;\n\n  min-height: 30px;\n\n  padding:\n    8px\n    12px;\n\n  display: inline-flex;\n\n  align-items: center;\n  justify-content: center;\n\n  color:\n    var(--hdm-ex8-white);\n\n  background:\n    var(--hdm-ex8-navy);\n\n  box-shadow:\n    4px 4px 0\n    rgba(53, 113, 158, 0.25);\n\n  font-size: 10px;\n  font-weight: 900;\n\n  line-height: 1;\n\n  letter-spacing: 0.05em;\n\n  text-transform: uppercase;\n\n  transition:\n    transform 0.30s ease,\n    box-shadow 0.30s ease;\n}\n\n\n.hdm-ex8-truck-card:hover\n.hdm-ex8-truck-label {\n\n  transform:\n    translate(-2px, -2px);\n\n  box-shadow:\n    6px 6px 0\n    rgba(53, 113, 158, 0.30);\n}\n\n\n\/* =========================================================\n   IMAGEN DEL CAMI\u00d3N\n   ========================================================= *\/\n\n.hdm-ex8-truck-image {\n  position: relative;\n\n  z-index: 2;\n\n  display: block;\n\n  width: 100%;\n  max-width: 326px;\n\n  height: 205px;\n\n  object-fit: contain;\n  object-position: center;\n\n  filter:\n    drop-shadow(\n      0\n      18px\n      16px\n      rgba(0, 44, 95, 0.17)\n    );\n\n  transform:\n    translate3d(0, 0, 0)\n    scale(1);\n\n  transition:\n    transform 0.46s\n    cubic-bezier(0.22, 1, 0.36, 1),\n\n    filter 0.34s ease;\n}\n\n\n.hdm-ex8-truck-card:hover\n.hdm-ex8-truck-image {\n\n  transform:\n    translate3d(-2px, -7px, 0)\n    scale(1.055);\n\n  filter:\n    drop-shadow(\n      8px\n      24px\n      18px\n      rgba(0, 44, 95, 0.23)\n    );\n}\n\n\n\/* =========================================================\n   CONTENIDO\n   ========================================================= *\/\n\n.hdm-ex8-truck-content {\n  flex: 1;\n\n  min-width: 0;\n\n  display: flex;\n  flex-direction: column;\n\n  padding:\n    29px\n    28px\n    27px;\n\n  border-top:\n    1px solid\n    rgba(0, 44, 95, 0.11);\n}\n\n\n\/* =========================================================\n   CATEGOR\u00cdA\n   ========================================================= *\/\n\n.hdm-ex8-truck-category {\n  display: block;\n\n  margin-bottom: 13px;\n\n  color:\n    var(--hdm-ex8-blue);\n\n  font-size: 11px;\n\n  font-weight: 900;\n\n  line-height: 1;\n\n  letter-spacing: 0.10em;\n\n  text-transform: uppercase;\n}\n\n\n\/* =========================================================\n   NOMBRE DEL MODELO\n   ========================================================= *\/\n\n.hdm-ex8-truck-name {\n  margin: 0;\n\n  color:\n    var(--hdm-ex8-navy);\n\n  font-size: 38px;\n\n  font-weight: 900;\n\n  line-height: 1;\n\n  letter-spacing: -0.035em;\n}\n\n\n\/* =========================================================\n   DESCRIPCI\u00d3N\n   ========================================================= *\/\n\n.hdm-ex8-truck-description {\n  margin:\n    19px\n    0\n    0;\n\n  color:\n    var(--hdm-ex8-text);\n\n  font-size: 14px;\n\n  font-weight: 400;\n\n  line-height: 1.65;\n}\n\n\n\/* =========================================================\n   ESPECIFICACIONES R\u00c1PIDAS\n   ========================================================= *\/\n\n.hdm-ex8-truck-specs {\n  width: 100%;\n\n  margin-top: 22px;\n\n  display: grid;\n\n  grid-template-columns:\n    repeat(3, minmax(0, 1fr));\n\n  gap: 1px;\n\n  background:\n    var(--hdm-ex8-border);\n\n  border:\n    1px solid\n    var(--hdm-ex8-border);\n}\n\n\n.hdm-ex8-truck-spec {\n  min-width: 0;\n\n  padding:\n    12px\n    6px\n    11px;\n\n  text-align: center;\n\n  background:\n    var(--hdm-ex8-soft);\n}\n\n\n.hdm-ex8-truck-spec-value {\n  display: block;\n\n  color:\n    var(--hdm-ex8-navy);\n\n  font-size: 16px;\n\n  font-weight: 900;\n\n  line-height: 1.05;\n}\n\n\n.hdm-ex8-truck-spec-label {\n  display: block;\n\n  margin-top: 5px;\n\n  color:\n    var(--hdm-ex8-muted);\n\n  font-size: 8px;\n\n  font-weight: 700;\n\n  line-height: 1.2;\n\n  letter-spacing: 0.07em;\n\n  text-transform: uppercase;\n}\n\n\n\/* =========================================================\n   BOT\u00d3N\n   ========================================================= *\/\n\n.hdm-ex8-truck-action {\n  width: 100%;\n\n  margin-top: auto;\n\n  padding-top: 28px;\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: space-between;\n\n  gap: 16px;\n\n  color:\n    var(--hdm-ex8-navy);\n\n  text-decoration: none;\n\n  font-size: 12px;\n\n  font-weight: 900;\n\n  line-height: 1;\n\n  letter-spacing: 0.035em;\n\n  text-transform: uppercase;\n}\n\n\n\/* =========================================================\n   TEXTO BOT\u00d3N\n   ========================================================= *\/\n\n.hdm-ex8-truck-action-text {\n  position: relative;\n\n  display: inline-block;\n\n  padding-bottom: 8px;\n}\n\n\n.hdm-ex8-truck-action-text::after {\n  content: \"\";\n\n  position: absolute;\n\n  right: 0;\n  bottom: 0;\n  left: 0;\n\n  height: 2px;\n\n  background:\n    var(--hdm-ex8-blue);\n\n  transform:\n    scaleX(1);\n\n  transform-origin:\n    left center;\n\n  transition:\n    transform 0.28s ease;\n}\n\n\n.hdm-ex8-truck-action:hover\n.hdm-ex8-truck-action-text::after {\n\n  transform:\n    scaleX(0.70);\n}\n\n\n\/* =========================================================\n   FLECHA BOT\u00d3N\n   ========================================================= *\/\n\n.hdm-ex8-truck-arrow {\n  width: 38px;\n  height: 38px;\n\n  flex: 0 0 auto;\n\n  display: inline-flex;\n\n  align-items: center;\n  justify-content: center;\n\n  color:\n    var(--hdm-ex8-white);\n\n  background:\n    var(--hdm-ex8-navy);\n\n  border:\n    1px solid\n    var(--hdm-ex8-navy);\n\n  box-shadow:\n    3px\n    3px\n    0\n    rgba(53, 113, 158, 0.25);\n\n  font-size: 16px;\n\n  transition:\n    transform 0.28s ease,\n    box-shadow 0.28s ease,\n    background-color 0.28s ease;\n}\n\n\n.hdm-ex8-truck-action:hover\n.hdm-ex8-truck-arrow,\n\n.hdm-ex8-truck-action:focus-visible\n.hdm-ex8-truck-arrow {\n\n  background:\n    var(--hdm-ex8-blue);\n\n  transform:\n    translate(-2px, -2px);\n\n  box-shadow:\n    5px\n    5px\n    0\n    var(--hdm-ex8-navy);\n}\n\n\n\/* =========================================================\n   FOCUS ACCESIBILIDAD\n   ========================================================= *\/\n\n.hdm-ex8-truck-action:focus-visible {\n  outline:\n    3px solid\n    rgba(53, 113, 158, 0.36);\n\n  outline-offset: 5px;\n}\n\n\n\/* =========================================================\n   RESPONSIVE TABLET \/ M\u00d3VIL\n   ========================================================= *\/\n\n@media (max-width: 440px) {\n\n  .hdm-ex8-card-stage {\n    --hdm-ex8-depth-x: 6px;\n    --hdm-ex8-depth-y: 6px;\n  }\n\n\n  .hdm-ex8-truck-media {\n    min-height: 260px;\n\n    padding:\n      40px\n      20px\n      24px;\n  }\n\n\n  .hdm-ex8-truck-image {\n    height: 190px;\n  }\n\n\n  .hdm-ex8-truck-content {\n    padding:\n      27px\n      24px\n      25px;\n  }\n\n\n  .hdm-ex8-truck-name {\n    font-size: 34px;\n  }\n\n\n  .hdm-ex8-truck-description {\n    font-size: 14px;\n\n    line-height: 1.60;\n  }\n\n\n  .hdm-ex8-truck-spec-value {\n    font-size: 15px;\n  }\n\n\n  .hdm-ex8-truck-spec-label {\n    font-size: 7.5px;\n  }\n\n}\n\n\n\/* =========================================================\n   M\u00d3VILES MUY PEQUE\u00d1OS\n   ========================================================= *\/\n\n@media (max-width: 340px) {\n\n  .hdm-ex8-truck-content {\n    padding:\n      24px\n      19px\n      23px;\n  }\n\n\n  .hdm-ex8-truck-name {\n    font-size: 30px;\n  }\n\n\n  .hdm-ex8-truck-spec {\n    padding:\n      10px\n      3px;\n  }\n\n\n  .hdm-ex8-truck-spec-value {\n    font-size: 13px;\n  }\n\n\n  .hdm-ex8-truck-spec-label {\n    font-size: 7px;\n  }\n\n}\n\n\n\/* =========================================================\n   ACCESIBILIDAD - REDUCIR MOVIMIENTO\n   ========================================================= *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n  .hdm-ex8-card-stage\n  .hdm-ex8-truck-card,\n\n  .hdm-ex8-card-stage\n  .hdm-ex8-truck-media::before,\n\n  .hdm-ex8-card-stage\n  .hdm-ex8-truck-media::after,\n\n  .hdm-ex8-card-stage\n  .hdm-ex8-truck-label,\n\n  .hdm-ex8-card-stage\n  .hdm-ex8-truck-image,\n\n  .hdm-ex8-card-stage\n  .hdm-ex8-truck-action-text::after,\n\n  .hdm-ex8-card-stage\n  .hdm-ex8-truck-arrow {\n\n    transition: none;\n\n  }\n\n}\n\n\n.hdm-ex8-card-stage {\n  container-type: inline-size;\n  width: 326px;\n  max-width: 100%;\n}\n.hdm-ex8-card-stage .hdm-ex8-truck-card {\n  height: 665px;\n  min-height: 665px;\n}\n\n@container (max-width: 300px) {\n  .hdm-ex8-card-stage .hdm-ex8-truck-card { height: 695px; min-height: 695px; }\n}\n@container (max-width: 280px) {\n  .hdm-ex8-card-stage .hdm-ex8-truck-card { height: 725px; min-height: 725px; }\n}\n@container (max-width: 250px) {\n  .hdm-ex8-card-stage .hdm-ex8-truck-card { height: 795px; min-height: 795px; }\n}\n@media (max-width: 440px) {\n  .hdm-ex8-card-stage .hdm-ex8-truck-card {\n    height: 625px;\n    min-height: 625px;\n  }\n  @container (max-width: 300px) {\n    .hdm-ex8-card-stage .hdm-ex8-truck-card { height: 665px; min-height: 665px; }\n  }\n  @container (max-width: 280px) {\n    .hdm-ex8-card-stage .hdm-ex8-truck-card { height: 690px; min-height: 690px; }\n  }\n  @container (max-width: 250px) {\n    .hdm-ex8-card-stage .hdm-ex8-truck-card { height: 755px; min-height: 755px; }\n  }\n}\n\n<\/style>\n\n\n<div class=\"hdm-ex8-card-stage\">\n\n  <article class=\"hdm-ex8-truck-card\">\n\n    <!-- =====================================================\n         IMAGEN\n         ===================================================== -->\n\n    <div class=\"hdm-ex8-truck-media\">\n\n      <span class=\"hdm-ex8-truck-label\">\n        Hyundai Trucks\n      <\/span>\n\n\n      <img loading=\"lazy\" decoding=\"async\"\n        class=\"hdm-ex8-truck-image\"\n\n        src=\"https:\/\/new.hyundaidemagna.com\/wp-content\/uploads\/2026\/10\/EX8.png\"\n\n        alt=\"Cami\u00f3n Hyundai Mighty EX8\"\n\n        width=\"700\"\n\n        height=\"440\"\n\n        loading=\"lazy\"\n      >\n\n    <\/div>\n\n\n    <!-- =====================================================\n         INFORMACI\u00d3N\n         ===================================================== -->\n\n    <div class=\"hdm-ex8-truck-content\">\n\n\n      <span class=\"hdm-ex8-truck-category\">\n        Cami\u00f3n de carga 4x2\n      <\/span>\n\n\n      <h2 class=\"hdm-ex8-truck-name\">\n        Mighty EX8\n      <\/h2>\n\n\n      <p class=\"hdm-ex8-truck-description\">\n\n        Cami\u00f3n di\u00e9sel turbo cargado con intercooler,\n        desarrollado para operaciones de distribuci\u00f3n\n        y transporte.\n\n        Ofrece 155 HP a 2,900 rpm, torque de\n        38 kg\u00b7m a 1,800 rpm y una capacidad de carga\n        de 5.25 toneladas.\n\n      <\/p>\n\n\n      <!-- ===================================================\n           BOT\u00d3N\n           =================================================== -->\n\n      <a\n        class=\"hdm-ex8-truck-action\"\n\n        href=\"https:\/\/new.hyundaidemagna.com\/?page_id=1201\"\n\n        target=\"_blank\"\n\n        rel=\"noopener noreferrer\"\n\n        aria-label=\"Conocer Hyundai Mighty EX8\"\n      >\n\n\n        <span class=\"hdm-ex8-truck-action-text\">\n          Conocer modelo\n        <\/span>\n\n\n        <span\n          class=\"hdm-ex8-truck-arrow\"\n          aria-hidden=\"true\"\n        >\n          \u2192\n        <\/span>\n\n\n      <\/a>\n\n\n    <\/div>\n\n  <\/article>\n\n<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-0e4d222 e-con e-atomic-element e-div-block-base e-default-div e-0e4d222-0371194 \" data-id=\"0e4d222\" data-element_type=\"e-div-block\" data-e-type=\"e-div-block\" data-interaction-id=\"0e4d222\" data-e-type=\"e-div-block\" data-id=\"0e4d222\">\n    <div class=\"elementor-element elementor-element-7e6a162 e-con e-atomic-element e-div-block-base e-default-div e-7e6a162-7ea1b47 \" data-id=\"7e6a162\" data-element_type=\"e-div-block\" data-e-type=\"e-div-block\" data-interaction-id=\"7e6a162\" data-e-type=\"e-div-block\" data-id=\"7e6a162\">\n    \t\t<div class=\"elementor-element elementor-element-ea7a1d2 elementor-widget elementor-widget-html\" data-id=\"ea7a1d2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\n\n.hdm-hd65-card-stage {\n  --hdm-hd65-navy: #002c5f;\n  --hdm-hd65-blue: #35719e;\n  --hdm-hd65-light-blue: #c8dce9;\n  --hdm-hd65-text: #333333;\n  --hdm-hd65-muted: #66727d;\n  --hdm-hd65-white: #ffffff;\n  --hdm-hd65-soft: #f6f8fa;\n  --hdm-hd65-border: #cfd9e2;\n\n  --hdm-hd65-depth-x: 8px;\n  --hdm-hd65-depth-y: 8px;\n\n  width: 326px;\n  max-width: 100%;\n  min-width: 0;\n\n  margin: 0 auto;\n\n  padding-right: var(--hdm-hd65-depth-x);\n  padding-bottom: var(--hdm-hd65-depth-y);\n\n  font-family: Arial, Helvetica, sans-serif;\n  color: var(--hdm-hd65-text);\n}\n\n\n\/* =========================================================\n   BOX SIZING\n   ========================================================= *\/\n\n.hdm-hd65-card-stage,\n.hdm-hd65-card-stage * {\n  box-sizing: border-box;\n}\n\n\n\/* =========================================================\n   TARJETA PRINCIPAL\n   ========================================================= *\/\n\n.hdm-hd65-truck-card {\n  position: relative;\n  z-index: 1;\n\n  width: 100%;\n  min-width: 0;\n  min-height: 665px;\n\n  display: flex;\n  flex-direction: column;\n\n  background: var(--hdm-hd65-white);\n\n  border: 1px solid var(--hdm-hd65-border);\n  border-top: 5px solid var(--hdm-hd65-blue);\n\n  border-radius: 1px;\n\n  box-shadow:\n    var(--hdm-hd65-depth-x)\n    var(--hdm-hd65-depth-y)\n    0\n    var(--hdm-hd65-navy),\n\n    0 14px 28px\n    rgba(0, 44, 95, 0.06);\n\n  transform: translate3d(0, 0, 0);\n\n  transition:\n    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),\n    box-shadow 0.34s cubic-bezier(0.22, 1, 0.36, 1),\n    border-color 0.25s ease;\n}\n\n\n\/* =========================================================\n   HOVER TARJETA\n   ========================================================= *\/\n\n.hdm-hd65-truck-card:hover {\n  border-color: rgba(0, 44, 95, 0.34);\n\n  transform: translate3d(-4px, -4px, 0);\n\n  box-shadow:\n    12px 12px 0 var(--hdm-hd65-navy),\n\n    0 22px 42px\n    rgba(0, 44, 95, 0.14);\n}\n\n\n\/* =========================================================\n   L\u00cdNEA DERECHA\n   ========================================================= *\/\n\n.hdm-hd65-truck-card::after {\n  content: \"\";\n\n  position: absolute;\n\n  top: 0;\n  right: -1px;\n  bottom: 0;\n\n  z-index: 4;\n\n  width: 1px;\n\n  background:\n    rgba(255, 255, 255, 0.55);\n\n  pointer-events: none;\n}\n\n\n\/* =========================================================\n   \u00c1REA DE IMAGEN\n   ========================================================= *\/\n\n.hdm-hd65-truck-media {\n  position: relative;\n\n  min-height: 282px;\n\n  overflow: hidden;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  padding:\n    42px\n    24px\n    26px;\n\n  background:\n    linear-gradient(\n      180deg,\n      #ffffff 0%,\n      #f7f9fb 100%\n    );\n}\n\n\n\/* =========================================================\n   FIGURA GEOM\u00c9TRICA DERECHA\n   ========================================================= *\/\n\n.hdm-hd65-truck-media::before {\n  content: \"\";\n\n  position: absolute;\n\n  right: -77px;\n  bottom: -102px;\n\n  width: 235px;\n  height: 235px;\n\n  border:\n    1px solid\n    rgba(53, 113, 158, 0.26);\n\n  transform:\n    rotate(54deg);\n\n  transform-origin: center;\n\n  transition:\n    transform 0.46s cubic-bezier(0.22, 1, 0.36, 1),\n    border-color 0.30s ease;\n}\n\n\n\/* =========================================================\n   L\u00cdNEA AZUL INFERIOR\n   ========================================================= *\/\n\n.hdm-hd65-truck-media::after {\n  content: \"\";\n\n  position: absolute;\n\n  left: 28px;\n  bottom: 24px;\n\n  width: 120px;\n  height: 4px;\n\n  background:\n    var(--hdm-hd65-blue);\n\n  transition:\n    width 0.34s ease,\n    transform 0.34s ease;\n}\n\n\n\/* =========================================================\n   HOVER ELEMENTOS MEDIA\n   ========================================================= *\/\n\n.hdm-hd65-truck-card:hover\n.hdm-hd65-truck-media::before {\n\n  border-color:\n    rgba(53, 113, 158, 0.42);\n\n  transform:\n    rotate(60deg)\n    scale(1.06);\n}\n\n\n.hdm-hd65-truck-card:hover\n.hdm-hd65-truck-media::after {\n\n  width: 145px;\n\n  transform:\n    translateX(4px);\n}\n\n\n\/* =========================================================\n   ETIQUETA HYUNDAI TRUCKS\n   ========================================================= *\/\n\n.hdm-hd65-truck-label {\n  position: absolute;\n\n  top: 18px;\n  left: 24px;\n\n  z-index: 3;\n\n  min-height: 30px;\n\n  padding:\n    8px\n    12px;\n\n  display: inline-flex;\n\n  align-items: center;\n  justify-content: center;\n\n  color:\n    var(--hdm-hd65-white);\n\n  background:\n    var(--hdm-hd65-navy);\n\n  box-shadow:\n    4px 4px 0\n    rgba(53, 113, 158, 0.25);\n\n  font-size: 10px;\n  font-weight: 900;\n\n  line-height: 1;\n\n  letter-spacing: 0.05em;\n\n  text-transform: uppercase;\n\n  transition:\n    transform 0.30s ease,\n    box-shadow 0.30s ease;\n}\n\n\n.hdm-hd65-truck-card:hover\n.hdm-hd65-truck-label {\n\n  transform:\n    translate(-2px, -2px);\n\n  box-shadow:\n    6px 6px 0\n    rgba(53, 113, 158, 0.30);\n}\n\n\n\/* =========================================================\n   IMAGEN DEL CAMI\u00d3N\n   ========================================================= *\/\n\n.hdm-hd65-truck-image {\n  position: relative;\n\n  z-index: 2;\n\n  display: block;\n\n  width: 100%;\n  max-width: 326px;\n\n  height: 205px;\n\n  object-fit: contain;\n  object-position: center;\n\n  filter:\n    drop-shadow(\n      0\n      18px\n      16px\n      rgba(0, 44, 95, 0.17)\n    );\n\n  transform:\n    translate3d(0, 0, 0)\n    scale(1);\n\n  transition:\n    transform 0.46s\n    cubic-bezier(0.22, 1, 0.36, 1),\n\n    filter 0.34s ease;\n}\n\n\n.hdm-hd65-truck-card:hover\n.hdm-hd65-truck-image {\n\n  transform:\n    translate3d(-2px, -7px, 0)\n    scale(1.055);\n\n  filter:\n    drop-shadow(\n      8px\n      24px\n      18px\n      rgba(0, 44, 95, 0.23)\n    );\n}\n\n\n\/* =========================================================\n   CONTENIDO\n   ========================================================= *\/\n\n.hdm-hd65-truck-content {\n  flex: 1;\n\n  min-width: 0;\n\n  display: flex;\n  flex-direction: column;\n\n  padding:\n    29px\n    28px\n    27px;\n\n  border-top:\n    1px solid\n    rgba(0, 44, 95, 0.11);\n}\n\n\n\/* =========================================================\n   CATEGOR\u00cdA\n   ========================================================= *\/\n\n.hdm-hd65-truck-category {\n  display: block;\n\n  margin-bottom: 13px;\n\n  color:\n    var(--hdm-hd65-blue);\n\n  font-size: 11px;\n\n  font-weight: 900;\n\n  line-height: 1;\n\n  letter-spacing: 0.10em;\n\n  text-transform: uppercase;\n}\n\n\n\/* =========================================================\n   NOMBRE DEL MODELO\n   ========================================================= *\/\n\n.hdm-hd65-truck-name {\n  margin: 0;\n\n  color:\n    var(--hdm-hd65-navy);\n\n  font-size: 38px;\n\n  font-weight: 900;\n\n  line-height: 1;\n\n  letter-spacing: -0.035em;\n}\n\n\n\/* =========================================================\n   DESCRIPCI\u00d3N\n   ========================================================= *\/\n\n.hdm-hd65-truck-description {\n  margin:\n    19px\n    0\n    0;\n\n  color:\n    var(--hdm-hd65-text);\n\n  font-size: 14px;\n\n  font-weight: 400;\n\n  line-height: 1.65;\n}\n\n\n\/* =========================================================\n   ESPECIFICACIONES R\u00c1PIDAS\n   ========================================================= *\/\n\n.hdm-hd65-truck-specs {\n  width: 100%;\n\n  margin-top: 22px;\n\n  display: grid;\n\n  grid-template-columns:\n    repeat(3, minmax(0, 1fr));\n\n  gap: 1px;\n\n  background:\n    var(--hdm-hd65-border);\n\n  border:\n    1px solid\n    var(--hdm-hd65-border);\n}\n\n\n.hdm-hd65-truck-spec {\n  min-width: 0;\n\n  padding:\n    12px\n    6px\n    11px;\n\n  text-align: center;\n\n  background:\n    var(--hdm-hd65-soft);\n}\n\n\n.hdm-hd65-truck-spec-value {\n  display: block;\n\n  color:\n    var(--hdm-hd65-navy);\n\n  font-size: 16px;\n\n  font-weight: 900;\n\n  line-height: 1.05;\n}\n\n\n.hdm-hd65-truck-spec-label {\n  display: block;\n\n  margin-top: 5px;\n\n  color:\n    var(--hdm-hd65-muted);\n\n  font-size: 8px;\n\n  font-weight: 700;\n\n  line-height: 1.2;\n\n  letter-spacing: 0.07em;\n\n  text-transform: uppercase;\n}\n\n\n\/* =========================================================\n   BOT\u00d3N\n   ========================================================= *\/\n\n.hdm-hd65-truck-action {\n  width: 100%;\n\n  margin-top: auto;\n\n  padding-top: 28px;\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: space-between;\n\n  gap: 16px;\n\n  color:\n    var(--hdm-hd65-navy);\n\n  text-decoration: none;\n\n  font-size: 12px;\n\n  font-weight: 900;\n\n  line-height: 1;\n\n  letter-spacing: 0.035em;\n\n  text-transform: uppercase;\n}\n\n\n\/* =========================================================\n   TEXTO BOT\u00d3N\n   ========================================================= *\/\n\n.hdm-hd65-truck-action-text {\n  position: relative;\n\n  display: inline-block;\n\n  padding-bottom: 8px;\n}\n\n\n.hdm-hd65-truck-action-text::after {\n  content: \"\";\n\n  position: absolute;\n\n  right: 0;\n  bottom: 0;\n  left: 0;\n\n  height: 2px;\n\n  background:\n    var(--hdm-hd65-blue);\n\n  transform:\n    scaleX(1);\n\n  transform-origin:\n    left center;\n\n  transition:\n    transform 0.28s ease;\n}\n\n\n.hdm-hd65-truck-action:hover\n.hdm-hd65-truck-action-text::after {\n\n  transform:\n    scaleX(0.70);\n}\n\n\n\/* =========================================================\n   FLECHA BOT\u00d3N\n   ========================================================= *\/\n\n.hdm-hd65-truck-arrow {\n  width: 38px;\n  height: 38px;\n\n  flex: 0 0 auto;\n\n  display: inline-flex;\n\n  align-items: center;\n  justify-content: center;\n\n  color:\n    var(--hdm-hd65-white);\n\n  background:\n    var(--hdm-hd65-navy);\n\n  border:\n    1px solid\n    var(--hdm-hd65-navy);\n\n  box-shadow:\n    3px\n    3px\n    0\n    rgba(53, 113, 158, 0.25);\n\n  font-size: 16px;\n\n  transition:\n    transform 0.28s ease,\n    box-shadow 0.28s ease,\n    background-color 0.28s ease;\n}\n\n\n.hdm-hd65-truck-action:hover\n.hdm-hd65-truck-arrow,\n\n.hdm-hd65-truck-action:focus-visible\n.hdm-hd65-truck-arrow {\n\n  background:\n    var(--hdm-hd65-blue);\n\n  transform:\n    translate(-2px, -2px);\n\n  box-shadow:\n    5px\n    5px\n    0\n    var(--hdm-hd65-navy);\n}\n\n\n\/* =========================================================\n   FOCUS ACCESIBILIDAD\n   ========================================================= *\/\n\n.hdm-hd65-truck-action:focus-visible {\n  outline:\n    3px solid\n    rgba(53, 113, 158, 0.36);\n\n  outline-offset: 5px;\n}\n\n\n\/* =========================================================\n   RESPONSIVE TABLET \/ M\u00d3VIL\n   ========================================================= *\/\n\n@media (max-width: 440px) {\n\n  .hdm-hd65-card-stage {\n    --hdm-hd65-depth-x: 6px;\n    --hdm-hd65-depth-y: 6px;\n  }\n\n\n  .hdm-hd65-truck-media {\n    min-height: 260px;\n\n    padding:\n      40px\n      20px\n      24px;\n  }\n\n\n  .hdm-hd65-truck-image {\n    height: 190px;\n  }\n\n\n  .hdm-hd65-truck-content {\n    padding:\n      27px\n      24px\n      25px;\n  }\n\n\n  .hdm-hd65-truck-name {\n    font-size: 34px;\n  }\n\n\n  .hdm-hd65-truck-description {\n    font-size: 14px;\n\n    line-height: 1.60;\n  }\n\n\n  .hdm-hd65-truck-spec-value {\n    font-size: 15px;\n  }\n\n\n  .hdm-hd65-truck-spec-label {\n    font-size: 7.5px;\n  }\n\n}\n\n\n\/* =========================================================\n   M\u00d3VILES MUY PEQUE\u00d1OS\n   ========================================================= *\/\n\n@media (max-width: 340px) {\n\n  .hdm-hd65-truck-content {\n    padding:\n      24px\n      19px\n      23px;\n  }\n\n\n  .hdm-hd65-truck-name {\n    font-size: 30px;\n  }\n\n\n  .hdm-hd65-truck-spec {\n    padding:\n      10px\n      3px;\n  }\n\n\n  .hdm-hd65-truck-spec-value {\n    font-size: 13px;\n  }\n\n\n  .hdm-hd65-truck-spec-label {\n    font-size: 7px;\n  }\n\n}\n\n\n\/* =========================================================\n   ACCESIBILIDAD - REDUCIR MOVIMIENTO\n   ========================================================= *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n  .hdm-hd65-card-stage\n  .hdm-hd65-truck-card,\n\n  .hdm-hd65-card-stage\n  .hdm-hd65-truck-media::before,\n\n  .hdm-hd65-card-stage\n  .hdm-hd65-truck-media::after,\n\n  .hdm-hd65-card-stage\n  .hdm-hd65-truck-label,\n\n  .hdm-hd65-card-stage\n  .hdm-hd65-truck-image,\n\n  .hdm-hd65-card-stage\n  .hdm-hd65-truck-action-text::after,\n\n  .hdm-hd65-card-stage\n  .hdm-hd65-truck-arrow {\n\n    transition: none;\n\n  }\n\n}\n\n\n.hdm-hd65-card-stage {\n  container-type: inline-size;\n  width: 326px;\n  max-width: 100%;\n}\n.hdm-hd65-card-stage .hdm-hd65-truck-card {\n  height: 665px;\n  min-height: 665px;\n}\n\n@container (max-width: 300px) {\n  .hdm-hd65-card-stage .hdm-hd65-truck-card { height: 695px; min-height: 695px; }\n}\n@container (max-width: 280px) {\n  .hdm-hd65-card-stage .hdm-hd65-truck-card { height: 725px; min-height: 725px; }\n}\n@container (max-width: 250px) {\n  .hdm-hd65-card-stage .hdm-hd65-truck-card { height: 795px; min-height: 795px; }\n}\n@media (max-width: 440px) {\n  .hdm-hd65-card-stage .hdm-hd65-truck-card {\n    height: 625px;\n    min-height: 625px;\n  }\n  @container (max-width: 300px) {\n    .hdm-hd65-card-stage .hdm-hd65-truck-card { height: 665px; min-height: 665px; }\n  }\n  @container (max-width: 280px) {\n    .hdm-hd65-card-stage .hdm-hd65-truck-card { height: 690px; min-height: 690px; }\n  }\n  @container (max-width: 250px) {\n    .hdm-hd65-card-stage .hdm-hd65-truck-card { height: 755px; min-height: 755px; }\n  }\n}\n\n<\/style>\n<!-- ========================================================\n     TARJETA HYUNDAI HD65 GT\n     ======================================================== -->\n\n<div class=\"hdm-hd65-card-stage\">\n\n  <article class=\"hdm-hd65-truck-card\">\n\n\n    <!-- =====================================================\n         IMAGEN\n         ===================================================== -->\n\n    <div class=\"hdm-hd65-truck-media\">\n\n      <span class=\"hdm-hd65-truck-label\">\n        Hyundai Trucks\n      <\/span>\n\n\n      <img loading=\"lazy\" decoding=\"async\"\n        class=\"hdm-hd65-truck-image\"\n\n        src=\"https:\/\/new.hyundaidemagna.com\/wp-content\/uploads\/2026\/10\/HD65GT.png\"\n\n        alt=\"Cami\u00f3n Hyundai HD65 GT\"\n\n        width=\"700\"\n\n        height=\"440\"\n\n        loading=\"lazy\"\n      >\n\n    <\/div>\n\n\n    <!-- =====================================================\n         INFORMACI\u00d3N\n         ===================================================== -->\n\n    <div class=\"hdm-hd65-truck-content\">\n\n\n      <span class=\"hdm-hd65-truck-category\">\n        Cami\u00f3n de carga 4x2\n      <\/span>\n\n\n      <h2 class=\"hdm-hd65-truck-name\">\n        HD65 GT\n      <\/h2>\n\n\n      <p class=\"hdm-hd65-truck-description\">\n\n        Cami\u00f3n di\u00e9sel turbo con intercooler y sistema\n        Common Rail, desarrollado para operaciones de\n        distribuci\u00f3n y transporte.\n\n        Ofrece 160 HP a 3,000 rpm, torque de\n        392 Nm a 1,500 rpm y una capacidad de carga\n        de 5 toneladas.\n\n      <\/p>\n\n\n      <!-- ===================================================\n           BOT\u00d3N\n           =================================================== -->\n\n      <a\n        class=\"hdm-hd65-truck-action\"\n\n        href=\"https:\/\/new.hyundaidemagna.com\/?page_id=1346\"\n\t\t\n\t\ttarget=\"_blank\"\n\n        rel=\"noopener noreferrer\"\n\n        aria-label=\"Conocer Hyundai HD65 GT\"\n      >\n\n\n        <span class=\"hdm-hd65-truck-action-text\">\n          Conocer modelo\n        <\/span>\n\n\n        <span\n          class=\"hdm-hd65-truck-arrow\"\n          aria-hidden=\"true\"\n        >\n          \u2192\n        <\/span>\n\n\n      <\/a>\n\n\n    <\/div>\n\n  <\/article>\n\n<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n\n<\/div>\n<div class=\"elementor-element elementor-element-189eb89 e-con e-atomic-element e-div-block-base e-default-div e-189eb89-08dfa97 \" data-id=\"189eb89\" data-element_type=\"e-div-block\" data-e-type=\"e-div-block\" data-interaction-id=\"189eb89\" data-e-type=\"e-div-block\" data-id=\"189eb89\">\n    <div class=\"elementor-element elementor-element-1ff8750 e-con e-atomic-element e-div-block-base e-default-div e-1ff8750-2976b51 \" data-id=\"1ff8750\" data-element_type=\"e-div-block\" data-e-type=\"e-div-block\" data-interaction-id=\"1ff8750\" data-e-type=\"e-div-block\" data-id=\"1ff8750\">\n    \t\t<div class=\"elementor-element elementor-element-c411dab elementor-widget elementor-widget-html\" data-id=\"c411dab\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\n.hdm-hd78-card-stage {\n  --hdm-hd78-navy: #002c5f;\n  --hdm-hd78-blue: #35719e;\n  --hdm-hd78-light-blue: #c8dce9;\n  --hdm-hd78-text: #333333;\n  --hdm-hd78-muted: #66727d;\n  --hdm-hd78-white: #ffffff;\n  --hdm-hd78-soft: #f6f8fa;\n  --hdm-hd78-border: #cfd9e2;\n\n  --hdm-hd78-depth-x: 8px;\n  --hdm-hd78-depth-y: 8px;\n\n  width: 326px;\n  max-width: 100%;\n  min-width: 0;\n\n  margin: 0 auto;\n\n  padding-right: var(--hdm-hd78-depth-x);\n  padding-bottom: var(--hdm-hd78-depth-y);\n\n  font-family: Arial, Helvetica, sans-serif;\n  color: var(--hdm-hd78-text);\n}\n\n\n\/* =========================================================\n   BOX SIZING\n   ========================================================= *\/\n\n.hdm-hd78-card-stage,\n.hdm-hd78-card-stage * {\n  box-sizing: border-box;\n}\n\n\n\/* =========================================================\n   TARJETA PRINCIPAL\n   ========================================================= *\/\n\n.hdm-hd78-truck-card {\n  position: relative;\n  z-index: 1;\n\n  width: 100%;\n  min-width: 0;\n  min-height: 665px;\n\n  display: flex;\n  flex-direction: column;\n\n  background: var(--hdm-hd78-white);\n\n  border: 1px solid var(--hdm-hd78-border);\n  border-top: 5px solid var(--hdm-hd78-blue);\n\n  border-radius: 1px;\n\n  box-shadow:\n    var(--hdm-hd78-depth-x)\n    var(--hdm-hd78-depth-y)\n    0\n    var(--hdm-hd78-navy),\n\n    0 14px 28px\n    rgba(0, 44, 95, 0.06);\n\n  transform: translate3d(0, 0, 0);\n\n  transition:\n    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),\n    box-shadow 0.34s cubic-bezier(0.22, 1, 0.36, 1),\n    border-color 0.25s ease;\n}\n\n\n\/* =========================================================\n   HOVER TARJETA\n   ========================================================= *\/\n\n.hdm-hd78-truck-card:hover {\n  border-color: rgba(0, 44, 95, 0.34);\n\n  transform: translate3d(-4px, -4px, 0);\n\n  box-shadow:\n    12px 12px 0 var(--hdm-hd78-navy),\n\n    0 22px 42px\n    rgba(0, 44, 95, 0.14);\n}\n\n\n\/* =========================================================\n   L\u00cdNEA DERECHA\n   ========================================================= *\/\n\n.hdm-hd78-truck-card::after {\n  content: \"\";\n\n  position: absolute;\n\n  top: 0;\n  right: -1px;\n  bottom: 0;\n\n  z-index: 4;\n\n  width: 1px;\n\n  background:\n    rgba(255, 255, 255, 0.55);\n\n  pointer-events: none;\n}\n\n\n\/* =========================================================\n   \u00c1REA DE IMAGEN\n   ========================================================= *\/\n\n.hdm-hd78-truck-media {\n  position: relative;\n\n  min-height: 282px;\n\n  overflow: hidden;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  padding:\n    42px\n    24px\n    26px;\n\n  background:\n    linear-gradient(\n      180deg,\n      #ffffff 0%,\n      #f7f9fb 100%\n    );\n}\n\n\n\/* =========================================================\n   FIGURA GEOM\u00c9TRICA DERECHA\n   ========================================================= *\/\n\n.hdm-hd78-truck-media::before {\n  content: \"\";\n\n  position: absolute;\n\n  right: -77px;\n  bottom: -102px;\n\n  width: 235px;\n  height: 235px;\n\n  border:\n    1px solid\n    rgba(53, 113, 158, 0.26);\n\n  transform:\n    rotate(54deg);\n\n  transform-origin: center;\n\n  transition:\n    transform 0.46s cubic-bezier(0.22, 1, 0.36, 1),\n    border-color 0.30s ease;\n}\n\n\n\/* =========================================================\n   L\u00cdNEA AZUL INFERIOR\n   ========================================================= *\/\n\n.hdm-hd78-truck-media::after {\n  content: \"\";\n\n  position: absolute;\n\n  left: 28px;\n  bottom: 24px;\n\n  width: 120px;\n  height: 4px;\n\n  background:\n    var(--hdm-hd78-blue);\n\n  transition:\n    width 0.34s ease,\n    transform 0.34s ease;\n}\n\n\n\/* =========================================================\n   HOVER ELEMENTOS MEDIA\n   ========================================================= *\/\n\n.hdm-hd78-truck-card:hover\n.hdm-hd78-truck-media::before {\n\n  border-color:\n    rgba(53, 113, 158, 0.42);\n\n  transform:\n    rotate(60deg)\n    scale(1.06);\n}\n\n\n.hdm-hd78-truck-card:hover\n.hdm-hd78-truck-media::after {\n\n  width: 145px;\n\n  transform:\n    translateX(4px);\n}\n\n\n\/* =========================================================\n   ETIQUETA HYUNDAI TRUCKS\n   ========================================================= *\/\n\n.hdm-hd78-truck-label {\n  position: absolute;\n\n  top: 18px;\n  left: 24px;\n\n  z-index: 3;\n\n  min-height: 30px;\n\n  padding:\n    8px\n    12px;\n\n  display: inline-flex;\n\n  align-items: center;\n  justify-content: center;\n\n  color:\n    var(--hdm-hd78-white);\n\n  background:\n    var(--hdm-hd78-navy);\n\n  box-shadow:\n    4px 4px 0\n    rgba(53, 113, 158, 0.25);\n\n  font-size: 10px;\n  font-weight: 900;\n\n  line-height: 1;\n\n  letter-spacing: 0.05em;\n\n  text-transform: uppercase;\n\n  transition:\n    transform 0.30s ease,\n    box-shadow 0.30s ease;\n}\n\n\n.hdm-hd78-truck-card:hover\n.hdm-hd78-truck-label {\n\n  transform:\n    translate(-2px, -2px);\n\n  box-shadow:\n    6px 6px 0\n    rgba(53, 113, 158, 0.30);\n}\n\n\n\/* =========================================================\n   IMAGEN DEL CAMI\u00d3N\n   ========================================================= *\/\n\n.hdm-hd78-truck-image {\n  position: relative;\n\n  z-index: 2;\n\n  display: block;\n\n  width: 100%;\n  max-width: 326px;\n\n  height: 205px;\n\n  object-fit: contain;\n  object-position: center;\n\n  filter:\n    drop-shadow(\n      0\n      18px\n      16px\n      rgba(0, 44, 95, 0.17)\n    );\n\n  transform:\n    translate3d(0, 0, 0)\n    scale(1);\n\n  transition:\n    transform 0.46s\n    cubic-bezier(0.22, 1, 0.36, 1),\n\n    filter 0.34s ease;\n}\n\n\n.hdm-hd78-truck-card:hover\n.hdm-hd78-truck-image {\n\n  transform:\n    translate3d(-2px, -7px, 0)\n    scale(1.055);\n\n  filter:\n    drop-shadow(\n      8px\n      24px\n      18px\n      rgba(0, 44, 95, 0.23)\n    );\n}\n\n\n\/* =========================================================\n   CONTENIDO\n   ========================================================= *\/\n\n.hdm-hd78-truck-content {\n  flex: 1;\n\n  min-width: 0;\n\n  display: flex;\n  flex-direction: column;\n\n  padding:\n    29px\n    28px\n    27px;\n\n  border-top:\n    1px solid\n    rgba(0, 44, 95, 0.11);\n}\n\n\n\/* =========================================================\n   CATEGOR\u00cdA\n   ========================================================= *\/\n\n.hdm-hd78-truck-category {\n  display: block;\n\n  margin-bottom: 13px;\n\n  color:\n    var(--hdm-hd78-blue);\n\n  font-size: 11px;\n\n  font-weight: 900;\n\n  line-height: 1;\n\n  letter-spacing: 0.10em;\n\n  text-transform: uppercase;\n}\n\n\n\/* =========================================================\n   NOMBRE DEL MODELO\n   ========================================================= *\/\n\n.hdm-hd78-truck-name {\n  margin: 0;\n\n  color:\n    var(--hdm-hd78-navy);\n\n  font-size: 38px;\n\n  font-weight: 900;\n\n  line-height: 1;\n\n  letter-spacing: -0.035em;\n}\n\n\n\/* =========================================================\n   DESCRIPCI\u00d3N\n   ========================================================= *\/\n\n.hdm-hd78-truck-description {\n  margin:\n    19px\n    0\n    0;\n\n  color:\n    var(--hdm-hd78-text);\n\n  font-size: 14px;\n\n  font-weight: 400;\n\n  line-height: 1.65;\n}\n\n\n\/* =========================================================\n   ESPECIFICACIONES R\u00c1PIDAS\n   ========================================================= *\/\n\n.hdm-hd78-truck-specs {\n  width: 100%;\n\n  margin-top: 22px;\n\n  display: grid;\n\n  grid-template-columns:\n    repeat(3, minmax(0, 1fr));\n\n  gap: 1px;\n\n  background:\n    var(--hdm-hd78-border);\n\n  border:\n    1px solid\n    var(--hdm-hd78-border);\n}\n\n\n.hdm-hd78-truck-spec {\n  min-width: 0;\n\n  padding:\n    12px\n    6px\n    11px;\n\n  text-align: center;\n\n  background:\n    var(--hdm-hd78-soft);\n}\n\n\n.hdm-hd78-truck-spec-value {\n  display: block;\n\n  color:\n    var(--hdm-hd78-navy);\n\n  font-size: 16px;\n\n  font-weight: 900;\n\n  line-height: 1.05;\n}\n\n\n.hdm-hd78-truck-spec-label {\n  display: block;\n\n  margin-top: 5px;\n\n  color:\n    var(--hdm-hd78-muted);\n\n  font-size: 8px;\n\n  font-weight: 700;\n\n  line-height: 1.2;\n\n  letter-spacing: 0.07em;\n\n  text-transform: uppercase;\n}\n\n\n\/* =========================================================\n   BOT\u00d3N\n   ========================================================= *\/\n\n.hdm-hd78-truck-action {\n  width: 100%;\n\n  margin-top: auto;\n\n  padding-top: 28px;\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: space-between;\n\n  gap: 16px;\n\n  color:\n    var(--hdm-hd78-navy);\n\n  text-decoration: none;\n\n  font-size: 12px;\n\n  font-weight: 900;\n\n  line-height: 1;\n\n  letter-spacing: 0.035em;\n\n  text-transform: uppercase;\n}\n\n\n\/* =========================================================\n   TEXTO BOT\u00d3N\n   ========================================================= *\/\n\n.hdm-hd78-truck-action-text {\n  position: relative;\n\n  display: inline-block;\n\n  padding-bottom: 8px;\n}\n\n\n.hdm-hd78-truck-action-text::after {\n  content: \"\";\n\n  position: absolute;\n\n  right: 0;\n  bottom: 0;\n  left: 0;\n\n  height: 2px;\n\n  background:\n    var(--hdm-hd78-blue);\n\n  transform:\n    scaleX(1);\n\n  transform-origin:\n    left center;\n\n  transition:\n    transform 0.28s ease;\n}\n\n\n.hdm-hd78-truck-action:hover\n.hdm-hd78-truck-action-text::after {\n\n  transform:\n    scaleX(0.70);\n}\n\n\n\/* =========================================================\n   FLECHA BOT\u00d3N\n   ========================================================= *\/\n\n.hdm-hd78-truck-arrow {\n  width: 38px;\n  height: 38px;\n\n  flex: 0 0 auto;\n\n  display: inline-flex;\n\n  align-items: center;\n  justify-content: center;\n\n  color:\n    var(--hdm-hd78-white);\n\n  background:\n    var(--hdm-hd78-navy);\n\n  border:\n    1px solid\n    var(--hdm-hd78-navy);\n\n  box-shadow:\n    3px\n    3px\n    0\n    rgba(53, 113, 158, 0.25);\n\n  font-size: 16px;\n\n  transition:\n    transform 0.28s ease,\n    box-shadow 0.28s ease,\n    background-color 0.28s ease;\n}\n\n\n.hdm-hd78-truck-action:hover\n.hdm-hd78-truck-arrow,\n\n.hdm-hd78-truck-action:focus-visible\n.hdm-hd78-truck-arrow {\n\n  background:\n    var(--hdm-hd78-blue);\n\n  transform:\n    translate(-2px, -2px);\n\n  box-shadow:\n    5px\n    5px\n    0\n    var(--hdm-hd78-navy);\n}\n\n\n\/* =========================================================\n   FOCUS ACCESIBILIDAD\n   ========================================================= *\/\n\n.hdm-hd78-truck-action:focus-visible {\n  outline:\n    3px solid\n    rgba(53, 113, 158, 0.36);\n\n  outline-offset: 5px;\n}\n\n\n\/* =========================================================\n   RESPONSIVE TABLET \/ M\u00d3VIL\n   ========================================================= *\/\n\n@media (max-width: 440px) {\n\n  .hdm-hd78-card-stage {\n    --hdm-hd78-depth-x: 6px;\n    --hdm-hd78-depth-y: 6px;\n  }\n\n\n  .hdm-hd78-truck-media {\n    min-height: 260px;\n\n    padding:\n      40px\n      20px\n      24px;\n  }\n\n\n  .hdm-hd78-truck-image {\n    height: 190px;\n  }\n\n\n  .hdm-hd78-truck-content {\n    padding:\n      27px\n      24px\n      25px;\n  }\n\n\n  .hdm-hd78-truck-name {\n    font-size: 34px;\n  }\n\n\n  .hdm-hd78-truck-description {\n    font-size: 14px;\n\n    line-height: 1.60;\n  }\n\n\n  .hdm-hd78-truck-spec-value {\n    font-size: 15px;\n  }\n\n\n  .hdm-hd78-truck-spec-label {\n    font-size: 7.5px;\n  }\n\n}\n\n\n\/* =========================================================\n   M\u00d3VILES MUY PEQUE\u00d1OS\n   ========================================================= *\/\n\n@media (max-width: 340px) {\n\n  .hdm-hd78-truck-content {\n    padding:\n      24px\n      19px\n      23px;\n  }\n\n\n  .hdm-hd78-truck-name {\n    font-size: 30px;\n  }\n\n\n  .hdm-hd78-truck-spec {\n    padding:\n      10px\n      3px;\n  }\n\n\n  .hdm-hd78-truck-spec-value {\n    font-size: 13px;\n  }\n\n\n  .hdm-hd78-truck-spec-label {\n    font-size: 7px;\n  }\n\n}\n\n\n\/* =========================================================\n   ACCESIBILIDAD - REDUCIR MOVIMIENTO\n   ========================================================= *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n  .hdm-hd78-card-stage\n  .hdm-hd78-truck-card,\n\n  .hdm-hd78-card-stage\n  .hdm-hd78-truck-media::before,\n\n  .hdm-hd78-card-stage\n  .hdm-hd78-truck-media::after,\n\n  .hdm-hd78-card-stage\n  .hdm-hd78-truck-label,\n\n  .hdm-hd78-card-stage\n  .hdm-hd78-truck-image,\n\n  .hdm-hd78-card-stage\n  .hdm-hd78-truck-action-text::after,\n\n  .hdm-hd78-card-stage\n  .hdm-hd78-truck-arrow {\n\n    transition: none;\n\n  }\n\n}\n\n\n.hdm-hd78-card-stage {\n  container-type: inline-size;\n  width: 326px;\n  max-width: 100%;\n}\n.hdm-hd78-card-stage .hdm-hd78-truck-card {\n  height: 665px;\n  min-height: 665px;\n}\n\n@container (max-width: 300px) {\n  .hdm-hd78-card-stage .hdm-hd78-truck-card { height: 695px; min-height: 695px; }\n}\n@container (max-width: 280px) {\n  .hdm-hd78-card-stage .hdm-hd78-truck-card { height: 725px; min-height: 725px; }\n}\n@container (max-width: 250px) {\n  .hdm-hd78-card-stage .hdm-hd78-truck-card { height: 795px; min-height: 795px; }\n}\n@media (max-width: 440px) {\n  .hdm-hd78-card-stage .hdm-hd78-truck-card {\n    height: 625px;\n    min-height: 625px;\n  }\n  @container (max-width: 300px) {\n    .hdm-hd78-card-stage .hdm-hd78-truck-card { height: 665px; min-height: 665px; }\n  }\n  @container (max-width: 280px) {\n    .hdm-hd78-card-stage .hdm-hd78-truck-card { height: 690px; min-height: 690px; }\n  }\n  @container (max-width: 250px) {\n    .hdm-hd78-card-stage .hdm-hd78-truck-card { height: 755px; min-height: 755px; }\n  }\n}\n\n<\/style>\n\n\n<div class=\"hdm-hd78-card-stage\">\n\n  <article class=\"hdm-hd78-truck-card\">\n\n\n    <!-- =====================================================\n         IMAGEN\n         ===================================================== -->\n\n    <div class=\"hdm-hd78-truck-media\">\n\n      <span class=\"hdm-hd78-truck-label\">\n        Hyundai Trucks\n      <\/span>\n\n\n      <img loading=\"lazy\" decoding=\"async\"\n        class=\"hdm-hd78-truck-image\"\n\n        src=\"https:\/\/new.hyundaidemagna.com\/wp-content\/uploads\/2026\/10\/HD78GT.png\"\n\n        alt=\"Cami\u00f3n Hyundai HD78 GT\"\n\n        width=\"700\"\n\n        height=\"440\"\n\n        loading=\"lazy\"\n      >\n\n    <\/div>\n\n\n    <!-- =====================================================\n         INFORMACI\u00d3N\n         ===================================================== -->\n\n    <div class=\"hdm-hd78-truck-content\">\n\n\n      <span class=\"hdm-hd78-truck-category\">\n        Cami\u00f3n de carga 4x2\n      <\/span>\n\n\n      <h2 class=\"hdm-hd78-truck-name\">\n        HD78 GT\n      <\/h2>\n\n\n      <p class=\"hdm-hd78-truck-description\">\n\n        Cami\u00f3n di\u00e9sel turbo con intercooler y sistema\n        Common Rail, dise\u00f1ado para operaciones de\n        distribuci\u00f3n y transporte de mayor capacidad.\n\n        Ofrece 160 HP a 3,000 rpm, torque de\n        392 Nm a 1,500 rpm y una capacidad de carga\n        de 5.5 toneladas.\n\n      <\/p>\n\n\n      <!-- ===================================================\n           BOT\u00d3N\n           =================================================== -->\n\n      <a\n        class=\"hdm-hd78-truck-action\"\n\n        href=\"https:\/\/new.hyundaidemagna.com\/?page_id=1385\"\n\t\t\n\t\ttarget=\"_blank\"\n\n        rel=\"noopener noreferrer\"\n\n        aria-label=\"Conocer Hyundai HD78 GT\"\n      >\n\n\n        <span class=\"hdm-hd78-truck-action-text\">\n          Conocer modelo\n        <\/span>\n\n\n        <span\n          class=\"hdm-hd78-truck-arrow\"\n          aria-hidden=\"true\"\n        >\n          \u2192\n        <\/span>\n\n\n      <\/a>\n\n\n    <\/div>\n\n  <\/article>\n\n<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n\n<\/div>\n\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-68590ca e-grid e-con-boxed e-con e-parent\" data-id=\"68590ca\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-f80a685 e-con-full e-flex e-con e-child\" data-id=\"f80a685\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5d48130 elementor-widget elementor-widget-html\" data-id=\"5d48130\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n  .hdm-advisor-cta-section {\n    --hdm-navy: #002c5f;\n    --hdm-blue: #35719e;\n    --hdm-white: #ffffff;\n\n    \/* Fondo exterior blanco *\/\n    --hdm-background: #ffffff;\n\n    --hdm-text-soft: rgba(255, 255, 255, 0.78);\n    --hdm-focus: rgba(255, 255, 255, 0.45);\n\n    position: relative;\n    isolation: isolate;\n\n    width: 100%;\n    min-width: 0;\n    overflow: hidden;\n\n    margin: 0;\n    padding: 40px 42px 92px;\n\n    background-color: var(--hdm-background) !important;\n\n    font-family: Arial, Helvetica, sans-serif;\n  }\n\n  .hdm-advisor-cta-section,\n  .hdm-advisor-cta-section * {\n    box-sizing: border-box;\n  }\n\n  \/* Figura geom\u00e9trica superior *\/\n  .hdm-advisor-cta-section::before {\n    content: \"\";\n\n    position: absolute;\n    top: -115px;\n    right: -135px;\n    z-index: 0;\n\n    width: 350px;\n    height: 350px;\n\n    border: 1px solid rgba(0, 44, 95, 0.08);\n\n    transform: rotate(17deg);\n\n    pointer-events: none;\n  }\n\n  \/* Figura geom\u00e9trica inferior *\/\n  .hdm-advisor-cta-section::after {\n    content: \"\";\n\n    position: absolute;\n    right: 8%;\n    bottom: -250px;\n    z-index: 0;\n\n    width: 430px;\n    height: 430px;\n\n    border: 1px solid rgba(0, 44, 95, 0.05);\n\n    transform: rotate(17deg);\n\n    pointer-events: none;\n  }\n\n\n  .hdm-advisor-cta {\n    position: relative;\n    z-index: 1;\n\n    width: 100%;\n    max-width: 1180px;\n    min-width: 0;\n    min-height: 162px;\n\n    margin: 0 auto;\n    padding: 34px 38px;\n\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) auto;\n    align-items: center;\n    gap: 42px;\n\n    background-color: var(--hdm-navy);\n\n    border-left: 5px solid var(--hdm-blue);\n    border-radius: 1px;\n  }\n\n  .hdm-advisor-cta-content {\n    min-width: 0;\n  }\n\n\n\n  .hdm-advisor-cta-title {\n    margin: 0;\n\n    color: var(--hdm-white);\n\n    font-size: clamp(30px, 3vw, 36px);\n    font-weight: 900;\n    line-height: 1.08;\n    letter-spacing: -0.035em;\n  }\n\n  .hdm-advisor-cta-text {\n    max-width: 760px;\n\n    margin: 12px 0 0;\n\n    color: var(--hdm-text-soft);\n\n    font-size: 15px;\n    font-weight: 400;\n    line-height: 1.6;\n  }\n\n\n  .hdm-advisor-cta-button {\n    min-width: 210px;\n    min-height: 54px;\n\n    padding: 15px 24px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 12px;\n\n    color: var(--hdm-navy);\n    background-color: var(--hdm-white);\n\n    border: 2px solid var(--hdm-white);\n    border-radius: 2px;\n\n    text-decoration: none;\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1;\n    white-space: nowrap;\n\n    transition:\n      color 0.25s ease,\n      background-color 0.25s ease,\n      border-color 0.25s ease,\n      transform 0.25s ease,\n      box-shadow 0.25s ease;\n  }\n\n  .hdm-advisor-cta-arrow {\n    display: inline-block;\n\n    font-size: 17px;\n    line-height: 1;\n\n    transition: transform 0.25s ease;\n  }\n\n  .hdm-advisor-cta-button:hover,\n  .hdm-advisor-cta-button:focus-visible {\n    color: var(--hdm-white);\n\n    background-color: var(--hdm-blue);\n    border-color: var(--hdm-blue);\n\n    transform: translate(-3px, -3px);\n\n    box-shadow: 6px 6px 0 rgba(255, 255, 255, 0.22);\n  }\n\n  .hdm-advisor-cta-button:hover .hdm-advisor-cta-arrow,\n  .hdm-advisor-cta-button:focus-visible .hdm-advisor-cta-arrow {\n    transform: translateX(4px);\n  }\n\n  .hdm-advisor-cta-button:focus-visible {\n    outline: 3px solid var(--hdm-focus);\n    outline-offset: 4px;\n  }\n\n\n  @media (max-width: 900px) {\n    .hdm-advisor-cta-section {\n      padding-right: 24px;\n      padding-left: 24px;\n    }\n\n    .hdm-advisor-cta {\n      grid-template-columns: 1fr;\n      gap: 26px;\n    }\n\n    .hdm-advisor-cta-button {\n      width: fit-content;\n    }\n  }\n\n\n  @media (max-width: 600px) {\n    .hdm-advisor-cta-section {\n      padding: 24px 16px 64px;\n    }\n\n    .hdm-advisor-cta {\n      min-height: auto;\n      padding: 30px 24px;\n      gap: 24px;\n    }\n\n    .hdm-advisor-cta-title {\n      font-size: clamp(26px, 8vw, 33px);\n    }\n\n    .hdm-advisor-cta-text {\n      font-size: 14px;\n    }\n\n    .hdm-advisor-cta-button {\n      width: 100%;\n      min-width: 0;\n    }\n  }\n\n\n  @media (prefers-reduced-motion: reduce) {\n    .hdm-advisor-cta-button,\n    .hdm-advisor-cta-arrow {\n      transition: none;\n    }\n  }\n<\/style>\n\n<section\n  class=\"hdm-advisor-cta-section\"\n  aria-labelledby=\"hdm-advisor-cta-title\"\n>\n  <div class=\"hdm-advisor-cta\">\n\n    <div class=\"hdm-advisor-cta-content\">\n\n      <h2\n        class=\"hdm-advisor-cta-title\"\n        id=\"hdm-advisor-cta-title\"\n      >\n        \u00bfNo sabes qu\u00e9 cami\u00f3n elegir?\n      <\/h2>\n\n      <p class=\"hdm-advisor-cta-text\">\n        Cu\u00e9ntanos sobre tu operaci\u00f3n y nuestro equipo comercial te ayudar\u00e1\n        a encontrar el modelo m\u00e1s adecuado para las necesidades de tu empresa.\n      <\/p>\n\n    <\/div>\n\n    <a\n      class=\"hdm-advisor-cta-button\"\n      href=\"https:\/\/wa.me\/50230020798\"\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      aria-label=\"Hablar con un asesor comercial\"\n    >\n      Hablar con un asesor\n\n      <span\n        class=\"hdm-advisor-cta-arrow\"\n        aria-hidden=\"true\"\n      >\n        \u2192\n      <\/span>\n    <\/a>\n\n  <\/div>\n<\/section>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Camion 1 Texto sobre camion 1 Conoce m\u00e1s \u2192 Hyundai Magna \u2014 Encabezado de operaciones NUESTRA L\u00cdNEA DE CAMIONES Encuentra el cami\u00f3n ideal para tu&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_customify_content_layout":"full-stretched","_customify_sidebar":"","_customify_page_header_display":"","_customify_disable_header":"","_customify_disable_header_top":"","_customify_disable_header_main":"","_customify_disable_header_bottom":"","_customify_disable_page_title":"","_customify_disable_content_vertical_padding":"","_customify_disable_footer_top":"","_customify_disable_footer_main":"","_customify_disable_footer_bottom":"","_customify_breadcrumb_display":"","_customify_header_transparent_display":"","footnotes":""},"class_list":["post-887","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/new.hyundaidemagna.com\/index.php?rest_route=\/wp\/v2\/pages\/887","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/new.hyundaidemagna.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/new.hyundaidemagna.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/new.hyundaidemagna.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/new.hyundaidemagna.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=887"}],"version-history":[{"count":5,"href":"https:\/\/new.hyundaidemagna.com\/index.php?rest_route=\/wp\/v2\/pages\/887\/revisions"}],"predecessor-version":[{"id":2022,"href":"https:\/\/new.hyundaidemagna.com\/index.php?rest_route=\/wp\/v2\/pages\/887\/revisions\/2022"}],"wp:attachment":[{"href":"https:\/\/new.hyundaidemagna.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=887"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}