/* VARIABLES CSS - Para facilitar cambios de colores y animaciones */
    :root {
      --primary-text-color: #f5f5f7; /* Blanco suave para texto en fondos oscuros */
      --secondary-text-color: rgba(255, 255, 255, 0.7); /* Gris claro para texto secundario */
      --background-dark: #000000; /* Negro puro para secciones oscuras */
      --background-light: #f5f5f7; /* Blanco muy suave para secciones claras */
      --card-bg-color: #1c1c1e; /* Fondo oscuro para tarjetas en secciones oscuras */
      --accent-color: #0070c9; /* Azul de Apple */
      --hover-scale: 1.03; /* Factor de escala para animaciones de zoom en hover */
      --transition-speed: 0.4s; /* Velocidad general de las transiciones */
    }

    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      background-color: var(--background-dark);
      color: var(--primary-text-color);
    }

    /* HERO SECTION */
    .hero {
      position: relative;
      height: 100vh;
      overflow: hidden;
      background: url('../hero.jpg') no-repeat center center/cover;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #fff;
      background-attachment: fixed;
    }
    .hero::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.4);
      z-index: 1;
    }
    .hero > div {
      position: relative;
      z-index: 2;
      padding: 20px;
    }
    .hero h1 {
      font-size: clamp(2.5rem, 8vw, 4.5rem);
      font-weight: 700;
      margin-bottom: 1rem;
      letter-spacing: -0.02em;
    }
    .hero p {
      font-size: clamp(1rem, 2.5vw, 1.5rem);
      opacity: 0.9;
    }

    /* GENERAL SECTION STYLES */
    .section {
      padding: 120px 20px;
      text-align: center;
      background-color: var(--background-dark);
      color: var(--primary-text-color);
    }
    .section h2 {
      font-size: clamp(2rem, 5vw, 3rem);
      font-weight: 600;
      margin-bottom: 40px;
      letter-spacing: -0.01em;
    }
    .section p.lead {
      font-size: clamp(1.1rem, 2.5vw, 1.4rem);
      line-height: 1.6;
      max-width: 800px;
      margin: 0 auto 60px auto;
      color: var(--secondary-text-color);
    }

    /* SECTION THEMES */
    .section.dark {
      background-color: var(--background-dark);
      color: var(--primary-text-color);
    }
    .section.light {
      background-color: var(--background-light);
      color: #1d1d1f;
    }
    .section.light h2, .section.light p {
        color: #1d1d1f;
    }
    .section.light p.lead {
        color: #6e6e73;
    }

    /* PRODUCT CARD STYLES */
    .product {
      margin-bottom: 80px;
      background-color: var(--card-bg-color);
      color: var(--primary-text-color);
      border-radius: 18px;
      padding: 30px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
      overflow: hidden;
      transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
      cursor: pointer;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .product:hover {
      transform: scale(var(--hover-scale));
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    }
    .product img { /* Estilo para las imágenes de producto normales */
      max-width: 90%;
      height: auto;
      border-radius: 12px;
      margin-bottom: 20px;
      transition: transform var(--transition-speed) ease;
    }
    .product:hover img {
        transform: scale(1.02);
    }
    
    /* ESTILO PARA VIDEOS DENTRO DE TARJETAS DE PRODUCTO */
    .product video {
      max-width: 100%; /* Ajusta el ancho del video dentro de la tarjeta */
      height: auto;
      border-radius: 12px; /* Bordes redondeados para el video */
      margin-bottom: 20px;
      object-fit: cover; /* Asegura que el video cubra el área sin distorsión */
    }

    .product h3 {
      font-size: clamp(1.4rem, 3vw, 2rem);
      font-weight: 600;
      margin-top: 15px;
      margin-bottom: 10px;
      color: var(--primary-text-color);
    }
    .product p {
      font-size: clamp(0.9rem, 2vw, 1.1rem);
      color: var(--secondary-text-color);
      line-height: 1.5;
      margin-bottom: 0;
    }

    /* BUTTON STYLES */
    .btn-light {
      background-color: #fff;
      color: #1d1d1f;
      border: 1px solid #ddd;
      font-weight: 500;
      padding: 12px 30px;
      border-radius: 999px;
      transition: all var(--transition-speed) ease;
    }
    .btn-light:hover {
      background-color: var(--accent-color);
      border-color: var(--accent-color);
      color: #fff;
      transform: translateY(-3px);
      box-shadow: 0 8px 15px rgba(0, 112, 201, 0.2);
    }
    .btn-dark-accent {
        background-color: var(--accent-color);
        color: #fff;
        border: 1px solid var(--accent-color);
        font-weight: 500;
        padding: 12px 30px;
        border-radius: 999px;
        transition: all var(--transition-speed) ease;
    }
    .btn-dark-accent:hover {
        background-color: #005bb5;
        border-color: #005bb5;
        transform: translateY(-3px);
        box-shadow: 0 8px 15px rgba(0, 112, 201, 0.2);
    }

    /* FOOTER STYLES */
    .footer {
      background: var(--background-dark);
      color: rgba(255, 255, 255, 0.6);
      text-align: center;
      padding: 60px 20px;
      font-size: 0.9rem;
    }
    .footer p {
        margin-bottom: 0;
    }
    .footer a {
        color: rgba(255, 255, 255, 0.6);
        text-decoration: none;
        transition: color 0.3s ease;
    }
    .footer a:hover {
        color: #fff;
    }

    /* Media Queries for Responsiveness */
    @media (max-width: 768px) {
      .hero {
        height: 70vh;
      }
      .hero h1 {
        font-size: 2.5rem;
      }
      .hero p {
        font-size: 1.2rem;
      }
      .section {
        padding: 80px 15px;
      }
      .section h2 {
        font-size: 2rem;
        margin-bottom: 30px;
      }
      .section p.lead {
        font-size: 1rem;
        margin-bottom: 40px;
      }
      .product {
        margin-bottom: 40px;
        padding: 20px;
      }
      .product h3 {
        font-size: 1.5rem;
      }
      .product p {
        font-size: 0.9rem;
      }
      .footer {
        padding: 30px 15px;
      }
    }
    /* Estilo para que el video ocupe el 100% del ancho y alto de su contenedor */
    /* MANTENER ESTOS ESTILOS AQUÍ PARA LA SECCIÓN DE VIDEO FULL WIDTH */
    .video-background {
        position: absolute; /* Permite posicionarlo dentro de su padre */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; /* Crucial: asegura que el video cubra el área sin distorsionarse */
        z-index: -1; /* Envía el video al fondo, detrás de cualquier contenido que pongas en la sección */
    }

    /* Opcional: Si quieres una superposición oscura sobre el video para mejorar la legibilidad del texto */
    .video-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4); /* Capa oscura (ajusta el 0.4 para más o menos oscuridad) */
        z-index: 0; /* Por encima del video, pero debajo del contenido */
    }

    /* Estilo para la sección contenedora del video a pantalla completa */
    .full-width-video-section {
        position: relative; /* Importante: para que el video absoluto se posicione correctamente */
        height: 100vh; /* Ocupa el 100% de la altura del viewport */
        width: 100%; /* Ocupa el 100% del ancho */
        overflow: hidden; /* Oculta cualquier parte del video que se desborde */
        display: flex; /* Para centrar contenido si lo hubiera sobre el video */
        align-items: center;
        justify-content: center;
        text-align: center;
        color: #fff; /* Asegura que el texto sobre el video sea visible */
        /* Añadido para prevenir que la sección tenga padding extra por defecto */
        padding: 0; 
        margin: 0;
    }
    .zoom {
      transition: transform 1.5s ease;
      
      }
      .zoom:hover {
      transform: scale(1.5);
      cursor: pointer;
      }
  .zoom_menor {
      transition: transform 1.5s ease;
     
      }
  .zoom_menor:hover {
  transform: scale(1.2);
  cursor: pointer;
  }