:root {
    /* Phone */
    --img-360:  url("images/newday-360.jpg");   /* Android compacto */
    --img-390:  url("images/newday-390.jpg");   /* iPhone 12/13/14 */
    --img-414:  url("images/newday-414.jpg");   /* iPhone 11/XR/Android grande */

    /* Tablet */
    --img-768:  url("images/newday-768.jpg");   /* iPad portrait */
    --img-1024: url("images/newday-1024.jpg");  /* iPad landscape / iPad Pro */

    /* Desktop */
    --img-1280: url("images/newday-1280.jpg");  /* Laptop pequeño */
    --img-1366: url("images/newday-1366.jpg");  /* Laptop más común */
    --img-1440: url("images/newday-1440.jpg");  /* Laptop grande */
    --img-1536: url("images/newday-1536.jpg");  /* Desktop escalado (Windows) */
    --img-1920: url("images/newday-1920.jpg");  /* Full HD */
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  html, body {
    width: 100%;
    background: #000;
  }

  /* Contenido accesible/SEO: visible para lectores de pantalla y buscadores, oculto visualmente */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .hero-image {
    display: block;
    width: 100%;
    height: auto;
  }

  .hero-wrap {
    position: relative;
    width: 100%;
  }

  /* Área del video: posicionada en % sobre la imagen para escalar en cualquier resolución */
  .video-slot {
    position: absolute;
    left: 9.948%;
    top: 1.641%;
    width: 80.10%;
    height: 6.508%;
    cursor: pointer;
    background: transparent;
    border: 0;
    padding: 0;
  }

  .video-slot iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }

  /* CTA "ME INTERESA" - Pulsar N125 FI, posicionado en % para escalar en cualquier resolución */
  .cta-n125fi {
    position: absolute;
    left: 20.99%;
    top: 91.74%;
    width: 18.44%;
    height: 0.767%;
    display: block;
  }

  /* CTA "ME INTERESA" - Pulsar N125 Carburada, posicionado en % para escalar en cualquier resolución */
  .cta-n125carburada {
    position: absolute;
    left: 60.63%;
    top: 91.74%;
    width: 18.44%;
    height: 0.767%;
    display: block;
  }

  /* Ancla invisible al inicio de la sección de misiones, para el scroll de los botones */
  .misiones-anchor {
    position: absolute;
    top: 56.5%;
    left: 0;
    width: 1px;
    height: 1px;
  }

  /* Botones "COMENZAR LA MISIÓN" / "PARTICIPANDO AQUÍ" -> llevan a la sección de misiones */
  .goto-misiones {
    position: absolute;
    display: block;
    cursor: pointer;
  }

  .goto-misiones--comenzar {
    left: 33.85%;
    top: 15.56%;
    width: 33.85%;
    height: 0.652%;
  }

  .goto-misiones--participando {
    left: 32.29%;
    top: 29.37%;
    width: 35.42%;
    height: 0.690%;
  }

  /* Botón "COTIZAR AHORA" -> WhatsApp */
  .cta-whatsapp {
    position: absolute;
    left: 39.84%;
    top: 94.49%;
    width: 21.09%;
    height: 0.537%;
    display: block;
  }

  /* Redes sociales, debajo del copy de Marvel al final de la página (25% del tamaño del logo Spider-Man) */
  .social-links {
    position: absolute;
    left: 43.10%;
    top: 98.93%;
    width: 14.84%;
    height: 0.460%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .social-links a {
    display: block;
    height: 100%;
    aspect-ratio: 1 / 1;
  }

  .social-links img {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* Triggers de los popups "MISIÓN 1/2/3", posicionados en % para escalar en cualquier resolución */
  .mision-trigger {
    position: absolute;
    cursor: pointer;
    background: transparent;
    border: 0;
    padding: 0;
  }

  .mision1-trigger {
    left: 19.79%;
    top: 59.09%;
    width: 20.57%;
    height: 2.645%;
  }

  .mision2-trigger {
    left: 61.46%;
    top: 58.68%;
    width: 25%;
    height: 2.914%;
  }

  .mision3-trigger {
    left: 27.60%;
    top: 63.97%;
    width: 19.79%;
    height: 2.607%;
  }

  /* Modal / popup Misión 1 */
  .modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    z-index: 1000;
    align-items: center;
    justify-content: center;
  }

  .modal-overlay.is-open {
    display: flex;
  }

  .modal-card-wrap {
    position: relative;
    width: min(90vw, 900px);
  }

  .modal-card-wrap--m1 { aspect-ratio: 1677 / 1035; }
  .modal-card-wrap--m2 { aspect-ratio: 1677 / 1876; }
  .modal-card-wrap--m3 { aspect-ratio: 1677 / 1829; }

  .modal-card-image {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* Botón de cerrar, posicionado en % sobre la X de cada imagen de popup */
  .modal-close {
    position: absolute;
    cursor: pointer;
    background: transparent;
    border: 0;
    padding: 0;
  }

  .modal-close--m1 {
    left: 93.68%;
    top: 11.40%;
    width: 5.96%;
    height: 9.66%;
  }

  .modal-close--m2 {
    left: 93.09%;
    top: 7.20%;
    width: 7.75%;
    height: 6.93%;
  }

  .modal-close--m3 {
    left: 93.68%;
    top: 4.97%;
    width: 5.96%;
    height: 5.47%;
  }

  /* Carrusel real (Swiper) sobre la zona del carrusel estático del hero */
  .photo-carousel-slot {
    position: absolute;
    left: 7.8125%;
    top: 48.89%;
    width: 84.375%;
    height: 5.48%;
    background: transparent;
    overflow: hidden;
  }

  .photo-swiper {
    width: 100%;
    height: 100%;
  }

  .photo-swiper .swiper-slide {
    border-radius: 1.4vw;
    overflow: hidden;
    opacity: 0.55;
    transform: scale(0.82);
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  .photo-swiper .swiper-slide-active {
    opacity: 1;
    transform: scale(1);
  }

  .photo-swiper .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .photo-swiper .swiper-button-next,
  .photo-swiper .swiper-button-prev {
    color: #fff;
    --swiper-navigation-size: min(4vw, 28px);
  }

  /* Visor 360° (Cloudimage 360 View) sobre la zona de la moto+360 del hero */
  .spin-360-slot {
    position: absolute;
    left: 22.4%;
    top: 81.1%;
    width: 56.25%;
    height: 6.52%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cloudimage-360 {
    width: 100%;
    height: 100%;
  }

  .cloudimage-360 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* Selector de color, posicionado en % sobre los íconos estáticos del hero */
  .color-swatches-slot {
    position: absolute;
    left: 14.58%;
    top: 83.09%;
    width: 13.28%;
    height: 0.499%;
    display: flex;
    gap: 6%;
  }

  .color-swatch {
    flex: 1;
    height: 100%;
    cursor: pointer;
    background: transparent;
    border: 2px solid transparent;
    border-radius: 4px;
    padding: 0;
  }

  .color-swatch.is-active {
    border-color: #fff;
  }