:root {
    --primary-color: #002D5B;
    --secondary-color: #003a70;
    --text-color: #333;
    --bg-light: #ffffff;
    --accent-color: #0056B3;
    --menu-width: 26%;
    --mobile-menu-width: 35%;
}

/* Reset general */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Inter", sans-serif;
}

/* Fondo y estilos globales */
body {
    background-color: var(--bg-light);
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    overflow: hidden;
    min-height: 100vh;
}

/* ✅ Oculta elementos de forma segura cuando se usa en JavaScript */
.hidden {
    display: none !important;
}

/* ✅ Estilos para los pasos del formulario */
.step {
    display: none; /* Oculta todos los pasos por defecto */
}

.step.active {
    display: block; /* Solo el paso activo se mostrará */
}

/* ✅ Contenedor del campo de modelo (se oculta hasta que el usuario elija "Sí, sí lo sé") */
.input-container {
    display: none;
}

/* ✅ Estilos para los botones deshabilitados */
button.hidden {
    display: none;
}

/* ✅ Estilos para los inputs de archivos */
input[type="file"] {
    display: block;
    margin: 10px auto;
}

/* Encabezado fijo */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1rem 1.25rem;
    background-color: white;
    border-bottom: 3px solid var(--primary-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    height: 70px;
}

/* Espaciado del primer bloque */
main {
    width: 100%;
    margin-top: 70px; /* Asegura que el contenido comience debajo del encabezado */
}

/* Logo ajustado para móviles */
.logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

@media screen and (max-width: 768px) {
    .logo {
        position: static;
        transform: none;
        margin-left: auto;
    }
}

.logo img {
    max-width: 110px;
    transition: transform 0.3s ease-in-out;
}

/* Efecto de "inflado" al pasar el cursor */
.logo:hover img {
    transform: scale(1.1);
}

/* Botón del menú */
.menu-btn {
    font-size: 1.6rem;
    cursor: pointer;
    background-color: var(--primary-color);
    color: white;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    z-index: 1100;
}

/* Menú lateral */
nav {
    position: fixed;
    top: 70px;
    left: -100%;
    width: var(--menu-width);
    height: calc(100% - 70px);
    background-color: var(--primary-color);
    transition: left 0.4s ease-in-out;
    padding-top: 40px;
    box-shadow: 4px 0 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

#menu.menu-open {
    left: 0;
}

/* Menú en dispositivos móviles */
@media screen and (max-width: 768px) {
    nav {
        width: var(--mobile-menu-width);
    }
}

/* Estilos de los enlaces del menú lateral */
nav ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

nav ul li {
    width: 100%;
    text-align: center;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-size: 1rem;
    display: block;
    padding: 14px;
    width: 100%;
    transition: background 0.3s ease-in-out, transform 0.2s;
}

nav ul li a:hover {
    background-color: var(--secondary-color);
    transform: scale(1.05);
}

/* Contenedor de los bloques */
.scroll-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 800px;
    margin: auto;
}

/* Bloques centrados */
.bloque {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 100vh;
    width: 100%;
    padding: 2rem 1rem;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.bloque.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Estilo de los textos */
h1 {
    font-size: 2rem;
    font-weight: bold;
    color: black;
    margin-bottom: 10px;
}

h2 {
    font-size: 1.2rem;
    color: #666;
    max-width: 75%;
    line-height: 1.5;
    margin: 0 auto;
}

@media screen and (max-width: 768px) {
    h1 {
        font-size: 1.8rem;
    }
    h2 {
        font-size: 1.1rem;
        max-width: 85%;
    }
}

/* ✅ Botones de acción */
.actions {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.actions a {
    font-size: 1.2rem;
    color: white;
    text-decoration: none;
    font-weight: bold;
    padding: 0.8rem 1.2rem;
    border-radius: 8px;
    background-color: var(--accent-color);
    transition: background 0.3s ease-in-out, transform 0.2s ease-in-out;
    white-space: nowrap;
    display: inline-block;
    min-width: 160px;
    text-align: center;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    border: none;
}

.actions a:hover {
    background-color: var(--secondary-color);
    transform: scale(1.07);
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.15);
}

/* ✅ Footer animado */
footer {
    position: fixed;
    bottom: -100px;
    left: 0;
    width: 100%;
    padding: 14px;
    background-color: white;
    border-top: 3px solid var(--primary-color);
    display: flex;
    justify-content: center;
    z-index: 1000;
    transition: bottom 0.5s ease-in-out;
    box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.15);
}

footer img {
    width: 45px;
    height: 45px;
    margin: 0 12px;
    transition: transform 0.2s ease-in-out;
}

footer img:hover {
    transform: scale(1.1);
}

/*  Mostrar footer cuando el último bloque esté en vista */
.show-footer {
    bottom: 0;
}



/* Estilos específicos para la sección de contacto */
#apartado-de-contacto {
  display: flex;
  flex-direction: column; /* Texto arriba, imágenes abajo */
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #ffffff; /* Fondo blanco */
  text-align: center;
  padding: 20px;
}

/* Estilo del texto de contacto */
.contacto-texto {
  margin-bottom: 20px; /* Espaciado entre texto e imágenes */
}

.contacto-texto h2 {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.contacto-texto p {
  font-size: 18px;
  color: #666;
}

/* Contenedor de imágenes */
.imagen-container {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap; /* Permite que las imágenes se ajusten en una fila en móviles */
}

/* Estilo de las imágenes */
.imagen-container img {
  width: 100px; /* Tamaño base */
  height: 100px;
  object-fit: cover;
  border-radius: 10px;
  transition: transform 0.3s ease-in-out;
}

/* Aumentar tamaño al pasar el cursor o tocar */
.imagen-container img:hover,
.imagen-container img:active {
  transform: scale(1.2);
}

/* 📱 Responsividad en móviles: Mantiene las imágenes en fila horizontal */
@media screen and (max-width: 600px) {
  .imagen-container {
    flex-direction: row; /* Asegura que las imágenes sigan en fila */
    justify-content: center;
    flex-wrap: wrap; /* Permite ajuste dinámico */
  }

  .imagen-container img {
    width: 80px; /* Reduce tamaño en móviles */
    height: 80px;
  }
}
/* Regla para ocultar elementos */
.oculto {
    display: none;
  }
  
  /* Fuente global */
  body {
      font-family: 'Inter', sans-serif;
      background-color: #f5f5f5;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
  }
  
  /* Contenedor principal de la cotización */
  .cotizacion-main {
      width: 90%;
      max-width: 600px;
      margin: auto;
      text-align: center;
  }
  
  /* Estilo para los pasos de la cotización */
  .cotizacion-paso {
      display: none; /* Ocultamos por defecto */
      max-width: 100%;
      padding: 20px;
      background: white;
      border-radius: 12px;
      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
      position: relative; /* Para que el botón de regresar se posicione respecto a este cuadro */
  }
  
  .cotizacion-paso:first-child {
      display: block; /* Mostramos el primer paso */
  }
  
  /* Estilos para inputs con diseño ovalado */
  .cotizacion-input {
      width: 100%;
      padding: 12px 16px;
      font-size: 1rem;
      border-radius: 50px; /* Forma ovalada */
      border: 1px solid #ccc;
      outline: none;
      transition: all 0.3s ease;
      background-color: #fff;
  }
  
  .cotizacion-input:focus {
      border-color: var(--accent-color);
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  }
  
  /* Estilos para etiquetas */
  .cotizacion-label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
  }
  
  /* Estilo de botones con separación y diseño adaptativo */
  .cotizacion-boton, .cotizacion-boton-regresar {
      font-size: 1.2rem;
      color: white;
      text-decoration: none;
      font-weight: bold;
      padding: 0.8rem 1.2rem;
      border-radius: 8px;
      background-color: var(--accent-color); /* Igual a los otros botones */
      transition: background 0.3s ease-in-out, transform 0.2s ease-in-out;
      white-space: nowrap;
      display: inline-block;
      min-width: 160px;
      text-align: center;
      box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
      border: none;
      cursor: pointer;
      margin: 10px auto; /* Agrega separación entre botones */
  }
  
  .cotizacion-boton:hover, .cotizacion-boton-regresar:hover {
      background-color: var(--secondary-color);
      transform: scale(1.07);
      box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.15);
  }
  
  /* Botón de regresar alineado afuera del cuadro blanco, en su esquina superior izquierda */
  .cotizacion-boton-regresar {
      position: absolute;
      top: -65px;  /* Subirlo más en todos los dispositivos */
      left: 10px; /* Alineado con el borde izquierdo del cuadro */
      background-color: var(--accent-color); /* Mismo color que los otros botones */
      padding: 6px 12px;
      font-size: 1rem;
      border-radius: 5px;
      z-index: 999; /* Se mantiene visible en todas las capas */
  }
  
  /* Ajuste específico para iPhone y Android */
  @media screen and (max-width: 768px) {
      .cotizacion-boton-regresar {
          top: -70px; /* Subir más el botón en móviles */
          left: 5px; /* Ajustar la alineación en móviles */
      }
  }
  
  @supports (-webkit-touch-callout: none) {
      .cotizacion-boton-regresar {
          position: absolute !important;
          top: -70px !important; /* Ajuste especial para iPhone */
          left: 10px !important;
          display: block !important;
          visibility: visible !important;
      }
  }
  
  /* Estilos específicos para la carga de fotos */
  .cotizacion-subida-fotos {
      display: flex;
      flex-direction: column;
      gap: 15px;
      align-items: center;
  }
  
  .cotizacion-subida-fotos input {
      display: block;
      width: 80%;
      padding: 10px;
      border-radius: 50px;
      border: 1px solid #ccc;
      background-color: #fff;
  }
  
  /* Botón "Enviar" centrado arriba de "No tengo a la mano mi celular" */
  #subir-fotos {
      display: none;
      margin-bottom: 10px;
  }
  
  #subir-fotos.mostrar {
      display: block;
  }
  
  /* Asegurar que las preguntas estén centradas y adaptadas */
  .cotizacion-paso h2 {
      text-align: center;
      font-size: 1.5rem;
      margin-bottom: 15px;
  }
  
  /* Responsivo para pantallas pequeñas */
  @media screen and (max-width: 480px) {
      .cotizacion-boton-regresar {
          top: -75px; /* Subirlo aún más en pantallas pequeñas */
          left: 5px; /* Evita que se pegue demasiado al borde */
      }
  }
  
  /* ====================================================== */
  /* ÁREA ESPECÍFICA PARA #paso-5 */
  /* Todo lo que vaya aquí sólo afectará al contenido dentro
     del elemento con id="paso-5" en tu HTML.               */
  /* ====================================================== */
  
  #paso-5 {
      margin-top: 80px; /* Ajuste de margen superior */
  }
  
  /* Cuando #paso-5 tenga la clase .subpaso-activo, se oculta la intro */
  #paso-5.subpaso-activo .intro-paso-5 {
      display: none;
  }
  
  #paso-5 .cotizacion-paso {
      width: 90%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 1rem;
  }
  
  #paso-5 .intro-paso-5 h2 {
      text-align: center;
      font-size: 1.5rem;
      margin-bottom: 0.5rem;
  }
  
  #paso-5 .intro-paso-5 p {
      text-align: center;
      margin-bottom: 1rem;
  }
  
  #paso-5 .opciones-principales {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      justify-items: center;
      margin: 0 auto;
      max-width: 600px;
      width: 100%;
  }
  
  @media (min-width: 768px) {
      #paso-5 .opciones-principales {
          grid-template-columns: 1fr 1fr 1fr;
          max-width: 900px;
      }
  }
  
  #paso-5 .opcion {
      width: 100%;
      max-width: 160px;
      padding: 0.5rem;
      position: relative;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      text-align: center;
  }
  
  /* Evitamos la selección en el contenedor de la imagen */
  #paso-5 .opcion-imagen {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: #fff;
      border: none;
      cursor: pointer;
      padding: 0.5rem;
      border-radius: 8px;
      transition: transform 0.2s;
      margin: 0 auto;
      width: 100%;
      user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
  }
    
  #paso-5 .opcion-imagen:hover {
      transform: scale(1.05);
  }
    
  #paso-5 .opcion-imagen img {
      max-width: 80px;
      max-height: 80px;
      object-fit: contain;
      display: block;
      margin: 0 auto;
  }
  
  /* Clase global para evitar arrastrar/seleccionar imágenes */
  .no-select {
      -webkit-user-drag: none !important;
      user-select: none !important;
      -webkit-user-select: none !important;
      -moz-user-select: none !important;
      -ms-user-select: none !important;
  }
  
  /* Evitamos la selección del pseudo-elemento que muestra la descripción */
  #paso-5 .opcion-imagen::after {
      content: attr(data-descripcion);
      display: block;
      margin-top: 0.4rem;
      font-size: 0.9rem;
      color: #333;
      text-align: center;
      white-space: normal;
      word-wrap: break-word;
      user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
  }
    
  /* --- SUBPASOS (ocultos por defecto) --- */
  #paso-5 .subpaso {
      display: none;
      margin: 2rem auto;
  }
    
  #paso-5 .subpaso-contenedor {
      width: 90%;
      max-width: 600px;
      margin: 0 auto;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      padding: 1.5rem 1rem;
      text-align: center;
  }
    
  @media (min-width: 992px) {
      #paso-5 .subpaso-contenedor {
          max-width: 800px;
          padding: 2rem;
      }
  }
    
  #paso-5 .subpaso h3,
  #paso-5 .subpaso h4 {
      margin-bottom: 0.75rem;
      text-align: center;
  }
    
  #paso-5 .grupo-opcion {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      justify-content: center;
      margin-top: 1rem;
  }
    
  #paso-5 .grupo-opcion.text-only {
      flex-direction: column;
      align-items: center;
  }
  
  /* Botones principales de la cotización */
  #paso-5 .cotizacion-boton {
      background-color: var(--accent-color);
      color: #fff;
      border: none;
      cursor: pointer;
      border-radius: 4px;
      transition: background-color 0.2s;
      text-align: center;
      font-size: 0.9rem;
      padding: 0.6rem 1rem;
      max-width: 280px;
      line-height: 1.2;
      white-space: normal;
      word-wrap: break-word;
  }
    
  #paso-5 .opcion .cotizacion-boton {
      max-width: 100%;
      margin: 0 auto;
  }
    
  #paso-5 .cotizacion-boton:hover {
      background-color: var(--secondary-color);
  }
    
  /* Botón de regresar */
  #paso-5 .regresar-boton {
      background-color: var(--accent-color);
      color: #fff;
      border: none;
      cursor: pointer;
      margin-bottom: 1rem;
      padding: 0.5rem 1rem;
      font-size: 1rem;
      border-radius: 4px;
      transition: background-color 0.2s;
  }
    
  #paso-5 .regresar-boton:hover {
      background-color: var(--secondary-color);
  }
    
  #paso-5 .otro_daño_formulario {
      display: none;
      margin-top: 1rem;
  }
    
  #paso-5 .otro_daño_formulario textarea {
      width: 100%;
      height: 80px;
      margin-bottom: 0.5rem;
      resize: none;
      padding: 0.5rem;
  }
    
  /* Botón de enviar (se mantiene en verde) */
  #paso-5 .otro_daño_enviar {
      background-color: #4CAF50;
      color: #fff;
      border: none;
      padding: 0.5rem 1rem;
      cursor: pointer;
      border-radius: 4px;
      font-size: 0.9rem;
      max-width: 280px;
      line-height: 1.2;
      white-space: normal;
      word-wrap: break-word;
  }
    
  #paso-5 .otro_daño_enviar:hover {
      background-color: #43A047;
  }
    
  #paso-5 .pregunta-final {
      display: none;
      text-align: center;
      margin-top: 2rem;
  }
    
  /* Ajuste para el botón "Otro daño" principal */
  #paso-5 .opcion.otro_daño_boton-container {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      max-width: 160px;
  }
    
  #paso-5 .otro_daño_boton {
      width: 100%;
      max-width: 140px;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0.75rem;
      margin: 0 auto;
      height: auto;
      font-size: 0.9rem;
  }
    
  /* Ajustes para el contenedor de opciones principales */
  #paso-5 .opciones-principales {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1rem;
      justify-items: center;
      max-width: 600px;
      width: 100%;
  }
    
  #paso-5 .opcion {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      max-width: 160px;
  }
    
  @media (max-width: 480px) {
      #paso-5 .otro_daño_boton {
          max-width: 120px;
      }
  }
    
  @supports (-webkit-touch-callout: none) {
      #paso-5 .otro_daño_boton {
          max-width: 100% !important;
          width: auto !important;
          min-width: 140px;
          display: flex !important;
          justify-content: center;
          align-items: center;
      }
  }
    
  /* =================================================== */
  /*    REGLAS ESPECIALES PARA EL CASO DE LAS CÁMARAS    */
  /* =================================================== */
    
  #paso-5 #subpaso-camara .camaras-contenedor {
      display: flex;
      justify-content: center;
      align-items: flex-start; 
      gap: 2rem;
      flex-wrap: wrap;
      margin-top: 1rem;
  }
    
  #paso-5 #subpaso-camara .camaras-contenedor .camara-bloque {
      display: flex;
      flex-direction: column;
      align-items: center;
      max-width: 200px;
      flex: 1 1 auto;
  }
    
  #paso-5 #subpaso-camara .camaras-contenedor .camara-bloque img {
      max-width: 80px;
      max-height: 80px;
      object-fit: contain;
      margin-bottom: 0.5rem;
  }
  
  /* Para que en Botones, Batería y Señal se vea todo en una sola columna */
  #paso-5 #subpaso-botones .grupo-opcion,
  #paso-5 #subpaso-bateria .grupo-opcion,
  #paso-5 #subpaso-senal .grupo-opcion {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
  }
  
  /* Estilos para el textarea en el subpaso "Otro daño" */
  #paso-5 .subpaso-contenedor textarea {
      width: 100%;                /* Ocupa el 100% del contenedor */
      border: 1px solid #ccc;     /* Borde gris claro */
      border-radius: 50px;        /* Forma ovalada */
      padding: 12px 16px;         /* Espacio interno vertical/horizontal */
      font-size: 1rem;            /* Tamaño de fuente */
      background-color: #fff;     /* Fondo blanco */
      transition: all 0.3s ease;  /* Transición suave */
      resize: none;               /* Evita que se redimensione manualmente */
      outline: none;              /* Quita contorno por defecto */
    }
    
    /* Efecto al recibir foco (clic) */
    #paso-5 .subpaso-contenedor textarea:focus {
      border-color: var(--accent-color);         /* Borde con color de acento */
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);    /* Sombra alrededor */
    }
    
    #paso-5.subpaso-activo .cotizacion-boton-regresar {
      display: none !important;
  }
  fieldset {
    border: none;   /* Quita el borde */
    margin: 0;      /* Ajusta los márgenes si lo deseas */
    padding: 0;     /* Ajusta el padding si lo deseas */
  }
  /* =========================== */
/*  ESTILOS GENERALES          */
/* =========================== */

/* Ocultar elementos */
.oculto {
    display: none;
  }
  
  /* Fuente y fondo global */
  body {
    font-family: 'Inter', sans-serif;
    background-color: #f5f5f5;
    margin: 0;
    padding: 0;
    font-size: 14px;
    overflow-y: auto; /* Se activa el scroll vertical si es necesario */
  }
  
  /* Variables de colores y tamaños */
  :root {
    --accent-color: #007BFF;
    --secondary-color: #0056b3;
    --primary-color: #002D5B;
    --bg-light: #ffffff;
    --menu-width: 26%;         /* Ancho del panel lateral en desktop */
    --mobile-menu-width: 35%;   /* Ancho del panel lateral en móvil */
  }
  
  /* Contenedor principal */
  #holoTechMain {
    padding: 10px;
  }
  
  /* =========================== */
  /*  GRID DE LA TIENDA          */
  /* =========================== */
  .holoTech-store-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columnas en desktop */
    gap: 20px;
    margin-bottom: 40px;
    padding: 0 10px;
  }
  
  .holoTech-product-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    padding: 15px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
  }
  
  .holoTech-product-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  }
  
  .holoTech-product-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
  }
  
  .holoTech-product-title {
    font-size: 1rem;
    color: #333;
    margin: 10px 0 5px;
  }
  
  .holoTech-product-price {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--accent-color);
    margin-bottom: 10px;
  }
  
  /* Ajustes para pantallas pequeñas: 2 columnas y, opcionalmente, 1 columna en muy pequeñas */
  @media screen and (max-width: 768px) {
    .holoTech-store-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;
    }
    .holoTech-product-title {
      font-size: 0.9rem;
    }
    .holoTech-product-price {
      font-size: 1.1rem;
    }
  }
  @media screen and (max-width: 480px) {
    .holoTech-store-grid {
      grid-template-columns: 1fr;
    }
  }
  
  /* =========================== */
  /*  SECCIÓN DETALLE DEL PRODUCTO (Vista Nueva) */
  /* =========================== */
  /* Sección principal de detalle en DESKTOP */
  .holoTech-product-detail {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
    gap: 20px;
    background: var(--bg-light);
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 10px;
    margin-top: 10px;
    display: none; /* Se mostrará con JS (display: flex) */
    animation: fadeIn 0.3s ease-out;
  }
  
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  
  /* Columna Izquierda: fotos (40% en desktop) */
  .holoTech-detail-left {
    width: 40%;
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: flex-start;
  }
  
  .holoTech-detail-left .holoTech-btn-back {
    align-self: flex-start;
    margin-bottom: 20px;
    font-size: 1.2rem;
    color: #fff;
    background-color: var(--accent-color);
    padding: 0.8rem 1.2rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
  }
  .holoTech-detail-left .holoTech-btn-back:hover {
    background-color: var(--secondary-color);
    transform: scale(1.05);
  }
  
  /* Contenedor de imágenes */
  .holoTech-detail-images {
    width: 250px;       /* Reducido de 300px a 250px */
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
    margin-top: 0;
  }
  
  .holoTech-detail-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    transition: transform 0.3s ease;
  }
  .holoTech-detail-image:hover {
    transform: scale(1.05);
  }
  
  /* Columna Derecha: preguntas y demás (60% en desktop) */
  .holoTech-detail-right {
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  
  .holoTech-detail-right h2,
  .holoTech-detail-right p,
  .holoTech-detail-right button,
  .holoTech-detail-right input {
    text-align: center;
    max-width: 90%;
  }
  
  .holoTech-detail-title {
    font-size: 1.8rem;
    margin: 10px 0;
    color: #333;
  }
  
  /* =========================== */
  /*  CATEGORÍAS DE SELECCIÓN    */
  /* =========================== */
  .holoTech-detail-category {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px;
    margin: 15px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
  }
  
  .holoTech-detail-category p {
    font-size: 1rem;
    margin-bottom: 8px;
    color: #555;
    text-align: center;
  }
  
  /* Opciones de color */
  .holoTech-color-options {
    display: flex;
    gap: 10px;
    justify-content: center;
  }
  .holoTech-color-circle {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #ccc;  /* Borde gris sutil */
    transition: transform 0.2s ease, border 0.2s ease;
  }
  
  .holoTech-color-circle:hover {
    transform: scale(1.1);
    border: 2px solid var(--accent-color);
  }
  .holoTech-color-circle.selected {
    border: 2px solid var(--accent-color);
    transform: scale(1.1);
  }
  
  /* Botones de calidad */
  .holoTech-quality-btn {
    font-size: 1rem;
    color: #fff;
    background-color: var(--accent-color);
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 8px;
    margin: 5px;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
  }
  .holoTech-quality-btn:hover {
    background-color: var(--secondary-color);
    transform: scale(1.05);
  }
  .holoTech-quality-btn.selected {
    background-color: var(--secondary-color);
    transform: scale(1.05);
  }
  
  /* Input para el modelo del celular */
  .holoTech-model-input {
    width: 100%;
    padding: 12px 16px;
    font-size: 1rem;
    border-radius: 50px;
    border: 1px solid #ccc;
    outline: none;
    transition: all 0.3s ease;
    background-color: #fff;
  }
  .holoTech-model-input:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  }
  
  /* Mensajes de error */
  .holoTech-error-message {
    font-size: 0.9rem;
    color: red;
    margin-top: 5px;
  }
  
  /* Botón "Conoce más" */
  .holoTech-info-button {
    font-size: 1.2rem;
    color: #fff;
    background-color: var(--accent-color);
    padding: 0.8rem 1.2rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
    margin: 10px 0;
  }
  .holoTech-info-button:hover {
    background-color: var(--secondary-color);
    transform: scale(1.05);
  }
  
  /* Precio en detalle */
  .holoTech-detail-price {
    font-size: 1.6rem;
    font-weight: bold;
    color: var(--accent-color);
    margin: 15px 0;
  }
  
  /* Botón para agregar al carrito */
  .holoTech-add-to-cart {
    font-size: 1.2rem;
    color: #fff;
    background-color: var(--accent-color);
    padding: 0.6rem 1rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
    margin-top: 15px;
    display: inline-block;
    width: auto;
  }
  .holoTech-add-to-cart:hover {
    background-color: var(--secondary-color);
    transform: scale(1.05);
  }
  
  /* =========================== */
  /*  VENTANA EMERGENTE (MODAL)  */
  /* =========================== */
  .holoTech-product-info-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }
  .holoTech-modal-content {
    background: var(--bg-light);
    padding: 20px;
    border-radius: 12px;
    max-width: 600px;
    width: 90%;
    position: relative;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    max-height: 90vh;
    overflow-y: auto;
  }
  .holoTech-close-modal {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
  }
  
  /* =========================== */
  /*  PANEL LATERAL (CARRITO)    */
  /* =========================== */
  .lateral-menu-panel {
    position: fixed;
    top: 70px;
    right: 0;
    width: var(--menu-width);
    height: calc(100% - 70px);
    background-color: var(--bg-light);
    border-left: 3px solid var(--primary-color);
    box-shadow: -4px 0 10px rgba(0, 0, 0, 0.2);
    overflow-y: auto;
    transform: translateX(110%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
    z-index: 1000;
    will-change: transform, opacity;
  }
  .lateral-menu-panel.cart-open {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
  }
  
  /* Botón flotante del carrito */
  .holoTech-floating-cart-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #fff; /* Fondo blanco sólido */
    border: 2px solid var(--accent-color);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: border-color 0.3s ease, transform 0.2s ease;
    z-index: 1100;
  }
  .holoTech-floating-cart-button:hover {
    border-color: var(--secondary-color);
    transform: scale(1.1);
  }
  .holoTech-floating-cart-icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
  }
  
  /* Estilos para el contenido del panel del carrito */
  .holoTech-cart-title {
    color: #000; /* Letras negras para "Lista del carrito" */
  }
  
  .holoTech-cart-total p {
    color: #000; /* Total en negro */
    font-size: 1.5rem; /* Tamaño mayor para resaltar */
  }
  
  #holoTechCartTotalAmount {
    color: #000;
    font-size: 1.5rem;
  }
  
  /* Botón "Realizar cotización" con estilo de botón (más pequeño) */
  .holoTech-btn-checkout {
    font-size: 1rem; /* Tamaño de fuente reducido */
    color: #fff;
    background-color: var(--accent-color);
    padding: 0.6rem 1rem; /* Menor padding */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
    margin: 8px 0; /* Margen reducido */
    display: inline-block;
    width: auto;
  }
  .holoTech-btn-checkout:hover {
    background-color: var(--secondary-color);
    transform: scale(1.05);
  }
  
  /* =========================== */
  /*      AJUSTES EN MÓVILES     */
  /* =========================== */
  @media screen and (max-width: 768px) {
    body {
      padding: 10px;
      font-size: 14px;
    }
    #holoTechMain {
      padding: 10px;
    }
    .holoTech-store-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;
    }
    .holoTech-product-card {
      padding: 10px;
    }
    .holoTech-product-title {
      font-size: 0.9rem;
    }
    .holoTech-product-price {
      font-size: 1.1rem;
    }
    
    .holoTech-product-detail {
      flex-direction: column;
      align-items: center;
    }
    
    .holoTech-detail-left {
      width: 100%;
      max-width: 300px;
    }
    .holoTech-detail-images {
      margin: 0 auto;
    }
    
    .holoTech-detail-right {
      width: 100%;
      max-width: 500px;
    }
    
    .holoTech-detail-images {
      grid-template-columns: repeat(2, 1fr);
      gap: 5px;
    }
    
    .holoTech-detail-title {
      font-size: 1.5rem;
    }
    .holoTech-detail-price {
      font-size: 1.4rem;
    }
    .holoTech-modal-content {
      width: 95%;
    }
    .lateral-menu-panel {
      width: 50%;
      top: 70px;
      height: calc(100% - 70px);
      transform: translateX(110%);
    }
    .lateral-menu-panel.cart-open {
      transform: translateX(0);
    }
    .holoTech-floating-cart-button {
      width: 50px;
      height: 50px;
      bottom: 15px;
      right: 15px;
    }
    .holoTech-floating-cart-icon {
      width: 24px;
      height: 24px;
    }
  }
  
  /* Ocultar botón flotante cuando el panel esté abierto */
  .lateral-menu-panel.cart-open ~ .holoTech-floating-cart-button {
    display: none;
  }
  @media screen and (min-width: 769px) {
    .holoTech-detail-images {
      width: 375px; /* Incrementado un 50% respecto a 250px */
      /* Se mantiene height: auto; y el resto de propiedades */
    }
  }
  
  /* Estilos para cada producto agregado al carrito */
  .holoTech-cart-item {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #ccc; /* Línea divisoria entre ítems */
  }
  
  /* Contenedor para la imagen del producto */
  .holoTech-cart-item-image-wrapper {
    width: 60px;
    height: 60px;
    margin-right: 10px;
    flex-shrink: 0;
  }
  
  /* Imagen del producto en el carrito */
  .holoTech-cart-item-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
  }
  
  /* Contenedor de la información (nombre, atributos y precio) */
  .holoTech-cart-item-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  /* Nombre del producto */
  .holoTech-cart-item-name {
    font-size: 1rem;
    margin: 0;
    font-weight: bold;
  }
  
  /* Atributos: color, calidad y modelo (en letra más pequeña) */
  .holoTech-cart-item-attributes {
    font-size: 0.8rem;
    color: #666;
    margin: 5px 0;
    line-height: 1.2;
  }
  
  /* Precio del producto */
  .holoTech-cart-item-price {
    font-size: 0.9rem;
    color: #333;
    font-weight: bold;
  }
  
  @keyframes rocking {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(5deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
  }
  
  .rocking {
    animation: rocking 1s;
  }
  
  /* =========================== */
  /*   ANIMACIÓN PUNTO VOLADOR   */
  /* =========================== */
  .fly-dot {
    position: fixed;
    width: 20px;
    height: 20px;
    background-color: var(--accent-color);
    border-radius: 50%;
    z-index: 1200;
    opacity: 1;
    will-change: transform, opacity;
  }
  
  @keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
  }
  
  .pulse {
    animation: pulse 0.5s ease-in-out;
  }
  
  /* =========================== */
  /*  CENTRAR PRODUCTOS EN COLUMNA EN EL CARRITO */
  /* =========================== */
  .holoTech-cart-item {
    flex-direction: column;      /* Imagen arriba, texto abajo */
    justify-content: center;     /* Centra verticalmente si es necesario */
    margin-bottom: 15px;         /* Espacio entre ítems opcional */
  }
  
  .holoTech-cart-item-image-wrapper {
    margin-right: 0;             /* Quitamos el margen lateral */
    margin-bottom: 10px;         /* Separación entre imagen y texto */
  }
  
  .holoTech-cart-item-info {
    text-align: center;          /* Centra el texto dentro de la columna */
    margin-top: 0;               /* Ajusta la separación si lo deseas */
  }
  
  /* =========================== */
  /*     MODAL DE COTIZACIÓN     */
  /* =========================== */
  #cotizacionModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1500;
  }
  
  #cotizacionModal > div {
    background: var(--bg-light);
    padding: 20px;
    border-radius: 10px;
    max-width: 400px;
    width: 90%;
  }
  
  /* Se reutilizan las clases existentes para el formulario:
     .cotizacion-paso, .cotizacion-label, .cotizacion-input, .cotizacion-error y .cotizacion-boton */
  /* Quitar los bullets en las listas dentro del modal */
  .holoTech-modal-text ul {
    list-style: none;        /* Desactiva el círculo por defecto */
    padding-left: 0;         /* Evita la sangría izquierda */
    margin-left: 0;          /* Ajusta si deseas cero margen */
  }
  /* El contenedor del ítem debe tener posición relativa */
  .holoTech-cart-item {
    position: relative;
  }
  
  /* Botón minimalista para eliminar el ítem */
  .holoTech-cart-item .remove-item {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #fff;
    color: #333;
    border: 1px solid #ddd;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1); /* Sombra cuadrada */
    border-radius: 0; /* Bordes cuadrados */
    padding: 4px 6px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
  }
  
  /* Efecto hover para mejorar la interacción */
  .holoTech-cart-item .remove-item:hover {
    background: #f7f7f7;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
  }
  /* ============================== */
  /*  ESTILOS PARA EL FORMULARIO    */
  /* ============================== */
  
  /* Contenedor principal del formulario */
  .cotizacion-main {
    width: 90%;
    max-width: 600px;
    margin: auto;
    text-align: center;
    background: #fff; /* Puedes usar var(--bg-light) si usas variables de color */
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }
  
  /* Cada paso (fieldset) del formulario */
  .cotizacion-paso {
    display: block; /* Muestra el paso actual (o usa display: none si manejas la visibilidad con JS) */
    max-width: 100%;
    padding: 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    position: relative;
  }
  
  /* Etiquetas */
  .cotizacion-label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    text-align: left; /* Cambia a 'center' si prefieres */
  }
  
  /* Inputs de texto y teléfono */
  .cotizacion-input {
    width: 100%;
    padding: 12px 16px;
    font-size: 1rem;
    border-radius: 50px;
    border: 1px solid #ccc;
    outline: none;
    transition: all 0.3s ease;
    background-color: #fff;
    margin-bottom: 10px; /* Espacio debajo de cada input */
  }
  .cotizacion-input:focus {
    border-color: #007BFF; /* O var(--accent-color) */
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  }
  
  /* Mensajes de error */
  .cotizacion-error {
    font-size: 0.9rem;
    color: red;
    margin-top: 5px;
  }
  
  /* Botones principales del formulario */
  .cotizacion-boton {
    font-size: 1.2rem;
    color: #fff;
    background-color: #007BFF; /* O var(--accent-color) */
    padding: 0.8rem 1.2rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
    display: inline-block;
    margin-top: 10px;
  }
  .cotizacion-boton:hover {
    background-color: #0056b3; /* O var(--secondary-color) */
    transform: scale(1.05);
  }
  
  /* Botón de "Regresar" dentro del formulario 
     Reutiliza la clase .holoTech-btn-back para 
     que coincida con el estilo del resto de la tienda. */
  #cotizacionBtnBack.holoTech-btn-back {
    /* Heredará las reglas de .holoTech-btn-back ya definidas en tu CSS */
    margin-bottom: 15px; /* Espacio debajo del botón si lo deseas */
  }
  /* Estilos forzados para el botón "Regresar" en el formulario */
  #cotizacionBtnBack {
    font-size: 1.2rem;
    color: #fff;
    background-color: var(--accent-color);
    padding: 0.8rem 1.2rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
    margin-bottom: 15px;
  }
  
  #cotizacionBtnBack:hover {
    background-color: var(--secondary-color);
    transform: scale(1.05);
  }
  #mensaje-cotizacion {
    display: none; /* Oculto por defecto hasta que el JS lo muestre */
    background-color: var(--bg-light);
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    max-width: 600px;
    margin: 20px auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }
  
  #mensaje-cotizacion h2 {
    font-size: 1.8rem;
    color: var(--primary-color);
    margin-bottom: 15px;
  }
  
  #mensaje-cotizacion p {
    font-size: 1rem;
    color: var(--text-color);
    margin-bottom: 10px;
  }
  /* Botón "Gira y Gana" centrado horizontalmente */
/* Botón "Gira y Gana" centrado horizontalmente */
#btn-gira-y-gana {
  font-size: 1.2rem;
  color: #fff;
  background-color: var(--accent-color);
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
  margin: 15px auto 0; /* Centrado */
  display: block;
  animation: pulse 1.2s infinite;
}

#btn-gira-y-gana:hover {
  background-color: var(--secondary-color);
  transform: scale(1.05);
}

.modal-ruleta {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 10; /* Valor muy bajo para quedar debajo del menú */
}

/* Contenedor rectangular con espacio para el mensaje */
.ruleta-contenedor {
  position: relative;
  width: 400px;
  height: 320px;
  background-color: var(--bg-light);
  border: 3px solid var(--primary-color);
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column; /* Canvas arriba, texto abajo */
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* Canvas de la ruleta: centrado y circular */
#canvasRuleta {
  width: 240px;
  height: 240px;
  border-radius: 50%;
}

/* Puntero: se asume que en el HTML usas un ícono, por ejemplo "▼" */
.ruleta-pointer {
  position: absolute;
  top: 40%;
  right: 45px; /* Ajusta para acercarlo o alejarlo del círculo */
  transform: translateY(-50%);
  font-size: 2rem;            /* Tamaño del ícono */
  color: var(--secondary-color); 
  filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.3)); /* Sombra opcional */
}

/* Mensaje de captura, texto en negro */
.ruleta-info {
  margin-top: 15px;
  font-size: 0.9rem;
  color: #000; 
  text-align: center;
  line-height: 1.4;
}
.modal-ruleta.no-overlay {
  background-color: transparent;
  pointer-events: none; /* Permite que los clics pasen a elementos inferiores */
}

.ruleta-contenedor {
  pointer-events: auto; /* Para que la ruleta en sí siga siendo visible (sin interacción) */
}
@media (max-width: 768px) {
  .holoTech-color-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
  }
}