/* Estilos globales */
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; background: #000; color: #fff; font-family: 'Montserrat', sans-serif;}
    img { max-width: 100%; display: block; }

    /* 1) Video Section */
   .video-section {
    position: relative;
    height: 72vh;
    margin: 20px;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.448);
    border-radius: 6px;
    box-shadow: 2 10px 18px rgba(0,0,0,0.6);
    overflow: hidden;
    }

    /* El vídeo por debajo */
    .video-wrapper {
    position: relative;
    width: 100%;             
    max-width: 800px;         
    aspect-ratio: 16/9;       
    overflow: hidden;         
    margin: 0 auto;    
    }
    .video-wrapper iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    }

    /* 3) Posicionamos el logo centrado absoluta y proporcionalmente */
    .logo-principal {
      position: fixed;
      top: 30%;
      left: 50%;
      transform: translate(-50%, -50%);
      max-width: 40%;           
      width: auto;
      height: auto;
      z-index: 2;               
      pointer-events: none;     
    }

    /* Decoraciones siempre al frente */
    .corner,
    .dot-pattern {
    position: absolute;
    pointer-events: none;
    z-index: 2;
    }

    /* Esquinas */
    .corner {
    width: 76px;
    height: 60px;
    }
    .corner.top-left {
    top: 12px;
    left: 12px;
    }
    .corner.top-right {
    top: 12px;
    right: 12px;
    }

    /* Patrón de puntos */
    .dot-pattern {
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 16px;
    background-image: url('dot-pattern.png');
    background-repeat: no-repeat;
    background-size: contain;
    }

    /* Responsivo */
    @media (max-width: 768px) {
      body{
        padding-left: 10px;
        padding-right: 10px;
      }
    .video-section { height: 30vh; margin: 10px; }
    .corner { width: 30px; height: 30px; }
    .dot-pattern { width: 90px; height: 12px; top: 8px; }

       .logo-principal {
        top: 10%;
        max-width: 60%;     
      }
    }

    /* 2) Contador */
    .counter-section {
      padding: 40px 20px;
      text-align: center;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-evenly;
      align-items: center;
    }
    .counter-box {
      display: inline-block;
      position: relative;
      border: 2px solid #fff;
      padding: 20px;
      min-width: 280px;
    }

    /* Responsivo */
    @media (max-width: 768px) {
      .counter-section {
        padding: 40px 20px;
        text-align: center;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        align-content: space-around;
      }
      .counter-box {
        margin-bottom: 20px;
      }
    }
    .counter-label {
      position: absolute;
      bottom: -12px;
      left: 50%;
      transform: translateX(-50%);
      background: #000;
      padding: 0 10px;
      font-size: 0.9rem;
      white-space: nowrap;
    }
    .counter-label .icon { margin-right: 6px; }
    .time-units {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }
    .unit {
      text-align: center;
    }
    .unit .label {
      font-size: 0.9rem;
      margin-bottom: 4px;
    }
    .unit .value {
      font-size: 1.5rem;
      font-weight: bold;
    }
    .separator {
      font-size: 1.5rem;
      line-height: 1;
      user-select: none;
    }
    
    /* Icono FontAwesome en el contador */
    .counter-icon {
      font-size: 1rem;      /* ajústalo al tamaño que quieras */
      margin-right: 6px;
      color: #fff;
    }

    /* 3) Texto centrado */
    .text-section {
      padding: 40px 20px;
      text-align: center;
      font-size: 1rem;
      line-height: 1.5;
    }

    /* 4) Galería de 3 imágenes */
   .image-section {
        display: flex;
        justify-content: space-evenly;
        flex-wrap: nowrap;
        padding: 40px;
        flex-direction: row;
        align-content: center;
        align-items: center;
        }
        .image-section img {
        border-radius: 4px;
        max-height: 180px;
    }
    /* Mobile */
    @media (max-width: 768px) {
      .image-section{
       flex-direction: column;
        justify-content: space-evenly;
        flex-wrap: nowrap;
        position: relative;
      }
        .image-section img {
            width: 100%;             /* en móvil apilan y ocupan todo el ancho */
            margin-bottom: 10px;
            max-height: 170px;
        }
    }

    /* 5) Formulario */
    .form-section {
      padding: 40px 20px;
    }
    .form-section form {
      max-width: 600px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .form-row.two-columns {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }
    .form-label {
      display: block;
      margin-bottom: 6px;
      font-size: 0.9rem;
      font-weight: bold;
    }
    /* Bordes de los inputs con degradado cian→magenta */
    .form-input {
    width: 100%;
    height: 45px;
    padding: 0 10px;
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, #00E0FF, #cd3d76) 1; 
    background: rgba(255,255,255,0.05);
    color: #fff;
    font-size: 1rem;
    transition: background 0.2s;
    }
    .form-input:focus {
    background: rgba(255,255,255,0.2);
    outline: none;
    }

    option{
      color: #000;
    }

    /* Botón “ENVIAR” con degradado y glow */
    .submit-btn {
    align-self: flex-end;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
    /* degradado diagonal suave */
    background: linear-gradient(45deg, #00E0FF 0%, #cd3d76 100%);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    box-shadow:
        0 0 8px rgba(205, 61, 118, 0.8),
        0 0 16px rgba(0, 224, 255, 0.8);
    transition: opacity 0.2s, box-shadow 0.2s;
    }
    .submit-btn:hover {
    opacity: 0.9;
    box-shadow:
        0 0 12px rgba(205, 61, 118, 1),
        0 0 24px rgba(0, 224, 255, 1);
    }

    /* Responsive */
    @media (max-width: 768px) {
      .video-section { height: 22vh; }
      .image-section img { width: 100%; }
      .form-row.two-columns { grid-template-columns: 1fr; }
      .decorativo2{display: none;}
      .decorativo3{display: none;}
      .action-row{justify-content: space-between;}
      .decorativo{
        max-width: 80px;
        max-height: 80px;
      }
    }

/* Fila de acción: decoraciones y botón */
.action-row {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 16px;
  margin-top: 40px;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
}

/* Agrupa los decorativos de la izquierda */
.left-decor {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* “X” decorativo */
.decor-x {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

/* Líneas diagonales */
.stripe-pattern {
  width: 80px;
  height: 8px;
  background-image: url('assets/stripe-pattern.png');
  background-repeat: no-repeat;
  background-size: contain;
}

/* Botón enviar (ya lo tienes, pero por si acaso) */
.submit-btn {
  position: relative;
  z-index: 1;
}

/* Patrón de cuadriculado a la derecha */
.decor-grid {
  width: 32px;
  height: 80px;
  object-fit: contain;
}
/* Triángulo degradado en la esquina inferior izquierda */
.page-triangle {
  bottom: 0;
  left: 0;
  width: 200px;   /* ajusta al tamaño que necesites */
  height: 200px;
  background: linear-gradient(to top right, #00E0FF, #cd3d76);
  clip-path: polygon(0 100%, 100% 100%, 0 0);
  pointer-events: none;
  z-index: 0;     /* asegúrate que quede por debajo de otros elementos si hace falta */
}

/* Mensajes de error, ocultos por defecto */
.error-message {
  display: none;
  color: #ff6b6b;
  font-size: 0.85rem;
  margin-top: 4px;
}

/* Input inválido: resalta borde y muestra mensaje */
.form-input.invalid {
  border-color: #ff6b6b;
}

/* Si el span.error-message tiene la clase active, se muestra */
.error-message.active {
  display: block;
}

.decorativo{
  max-width: 120px;
  max-height: 120px;
}

/* Modal overlay */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.modal.hidden {
  display: none;
}

/* Modal box */
.modal-content {
  position: relative;
  background: #111;
  padding: 24px 32px;
  border-radius: 8px;
  max-width: 90%;
  width: 320px;
  text-align: center;
  color: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.7);
  animation: popin 0.2s ease-out;
}

/* Close button */
.close-btn {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 1.4rem;
  cursor: pointer;
  color: #ccc;
}
.close-btn:hover {
  color: #fff;
}

/* Icon container */
#modal-icon {
  font-size: 2.5rem;
  margin-bottom: 12px;
}

/* Message */
#modal-message {
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
}

/* Tipo éxito */
.modal-content.success {
  border: 2px solid #3cb371;
}
.modal-content.success #modal-icon {
  color: #3cb371;
}
  
/* Tipo error */
.modal-content.error {
  border: 2px solid #ff6b6b;
}
.modal-content.error #modal-icon {
  color: #ff6b6b;
}

/* Animación de aparición */
@keyframes popin {
  from { transform: scale(0.8); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}