/* --- estilos.css (añadir al final) --- */

/* --- Página de Detalle de Computadora --- */

.detalle-main {
    padding-bottom: 60px;
    background-color: black;
    color: white;
}

.seccion-detalle-pc {
    margin: 0 auto;
    padding: 30px 0;
}

.ruta-navegacion {
    font-size: 0.9em;
    color: #888;
    margin-bottom: 30px;
}

.ruta-navegacion a {
    color: #ff4d00;
    text-decoration: none;
    transition: color 0.3s ease;
}

.ruta-navegacion a:hover {
    color: #ffb300;
}

.ruta-navegacion span {
    margin: 0 5px;
}

/* CAROUSEL DE IMAGENES */
/* --- Carrusel de Imágenes --- */
.carousel {
    position: relative;
    width: 100%;
    overflow: hidden; /* Oculta los slides que no están activos */
}

.carousel,
.detalle-pc-imagen > img:not(.carousel-slide) { /* Esto selecciona el carrusel o la img directa si no hay carrusel */
    margin-bottom: 20px; /* Añade un margen inferior para separarlo de la descripción */
    width: 100%; /* Asegura que la imagen/carrusel ocupe el ancho completo */
    max-width: 100%; /* Para evitar que se desborde si es demasiado grande */
    height: auto; /* Mantiene la proporción */
}

.carousel-images {
    display: flex; /* Permite que los slides se coloquen uno al lado del otro */
    transition: transform 0.6s ease-in-out; /* Transición suave para el deslizamiento */
    /* El JavaScript ajustará el transform: translateX() de este elemento */
}

.carousel-slide {
    min-width: 100%; /* Cada slide ocupa el 100% del ancho del .carousel-images */
    flex-shrink: 0; /* Evita que los slides se encojan */
    height: auto; /* Altura automática basada en el contenido */
    display: flex; /* Para centrar la imagen dentro del slide */
    justify-content: center;
    align-items: center;
    padding: 20px; /* Espacio interno para la imagen */
}

.carousel-slide img {
    max-width: 100%;
    max-height: 400px; /* Ajusta la altura máxima de las imágenes dentro del carrusel */
    object-fit: contain; /* Asegura que la imagen se ajuste sin recortarse */
    border-radius: 8px; /* Bordes ligeramente redondeados para las imágenes */
}

/* --- Botones de Navegación (Flechas) --- */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    /* Color principal: Tu verde neón, con ligera transparencia */
    background-color: white; /* #39FF14 con 80% de opacidad */
    color: #0d0d0d; /* Texto muy oscuro para alto contraste con el neón */
    border: none;
    padding: 6px 15px; /* Un poco más de padding para hacerlos más grandes y fáciles de clickear */
    cursor: pointer;
    font-size: 1.4em; /* Un poco más grande para el icono/texto */
    font-weight: bold;
    border-radius: 50%; /* Mantenerlos perfectamente redondos */
    /* Transiciones más suaves para todos los efectos */
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 10; /* Asegura que estén por encima de las imágenes */
    outline: none; /* Elimina el contorno de foco por defecto */
    /* Sombra inicial con un toque de neón sutil */
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.4), /* Sombra de neón */
                0 4px 15px rgba(0, 0, 0, 0.4); /* Sombra de profundidad */
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Sombra sutil para el texto/icono */
}

.carousel-btn:hover {
    /* Color más sólido y brillante al pasar el ratón */
    background-color: #39FF14; /* Tu verde neón sólido */
    transform: translateY(-50%) scale(1.08); /* Un poco más grande y notorio */
    /* Sombra de neón más intensa al pasar el ratón */
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.8), /* Brillo neón fuerte */
                0 6px 20px rgba(0, 0, 0, 0.6); /* Sombra de profundidad más pronunciada */
}

.carousel-btn.prev-btn {
    left: 15px; /* Posición del botón izquierdo */
}

.carousel-btn.next-btn {
    right: 15px; /* Posición del botón derecho */
}

/* --- Puntos de Navegación (Dots) --- */
.carousel-dots {
    position: absolute;
    bottom: 20px; /* Un poco más de espacio desde abajo para que respire */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px; /* Aumentamos el espacio entre los puntos para una mejor separación visual */
    z-index: 10;
    padding: 8px 15px; /* Pequeño padding alrededor de los puntos para un "área de toque" */
    background-color: rgba(0, 0, 0, 0.4); /* Un fondo oscuro semitransparente para que resalten */
    border-radius: 20px; /* Bordes más redondeados para el contenedor de puntos */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* Sombra sutil para profundidad */
}

.dot {
    width: 12px; /* Un poco más grandes para que sean más fáciles de ver y clickear */
    height: 12px;
    background-color: rgba(255, 255, 255, 0.6); /* Blanco más opaco pero aún translúcido */
    border-radius: 50%; /* Mantenerlos perfectamente redondos */
    cursor: pointer;
    transition: all 0.3s ease; /* Transición más suave para todos los cambios */
    border: 2px solid rgba(255, 255, 255, 0.2); /* Borde más grueso y menos visible */
}

.dot:hover {
    background-color: rgba(255, 255, 255, 0.8); /* Más brillante al pasar el ratón */
    transform: scale(1.1); /* Efecto sutil al pasar el ratón */
    border-color: rgba(255, 255, 255, 0.4);
}

.dot.active {
    width: 14px; /* Un poco más grande para el activo, para destacarlo */
    height: 14px;
    background-color: #39FF14; /* ¡Tu verde neón para el punto activo! */
    transform: scale(1.2); /* Sigue haciéndolo ligeramente más grande */
    border-color: #39FF14; /* Borde del mismo color neón */
    box-shadow: 0 0 8px rgba(57, 255, 20, 0.7); /* Brillo neón para el punto activo */
}


.product-description {
    margin-top: 40px; /* Incrementado para más separación visual */
    padding: 20px;
    background-color: #1a1a1a;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    color: #e0e0e0;
    line-height: 1.6;
    width: 100%; /* Asegura que ocupe todo el ancho disponible en la columna */
    box-sizing: border-box; /* Incluye padding en el ancho total */
}

.product-description h3 {
    font-size: 24px; /* Tamaño del título de la descripción */
    color: #00ffff; /* Color neón para el título */
    margin-bottom: 15px; /* Espacio debajo del título */
    text-align: center; /* Centrar el título de la descripción */
}

.product-description p {
    font-size: 16px; /* Tamaño del texto del párrafo */
    text-align: justify; /* Justifica el texto para una apariencia más formal */
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Contenido de la descripción con altura limitada */
.description-content {
    overflow: hidden; /* Oculta cualquier contenido que se desborde */
    height: 100px; /* <--- ALTURA INICIAL LIMITADA. ¡AJÚSTALA A TU GUSTO! */
    position: relative; /* Necesario para el efecto de degradado */
}

/* Efecto de degradado al final del texto para indicar que hay más */
.description-content::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px; /* Altura del efecto de degradado */
    /* El degradado va de tu color de fondo (totalmente opaco) a transparente */
    background: linear-gradient(to top, rgba(248, 249, 250, 1) 0%, rgba(248, 249, 250, 0) 100%);
    pointer-events: none; /* Asegura que no bloquee clics sobre el texto debajo */
}

/* Clase que se añade para expandir la descripción */
.description-content.expanded {
    height: auto; /* Permite que el contenido tome su altura completa */
}

/* Cuando se expande, oculta el efecto de degradado */
.description-content.expanded::after {
    display: none;
}

/* Estilos para el botón "Ver Más" / "Cerrar" */
.ver-mas-btn {
    display: block; /* Hace que el botón ocupe su propia línea */
    width: 150px; /* Ancho fijo para el botón, ajusta si lo quieres auto */
    margin: 15px auto 0 auto; /* Centra el botón y le da espacio superior */
    
    background-color: #007bff; /* Color azul de botón, puedes usar tu naranja o verde neón */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 25px; /* Botones más redondeados */
    cursor: pointer;
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase; /* Texto en mayúsculas */
    letter-spacing: 0.5px; /* Espaciado entre letras */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.ver-mas-btn:hover {
    background-color: #0056b3; /* Color más oscuro al pasar el ratón */
    transform: translateY(-2px); /* Pequeño efecto de elevación */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/* Estilo para el botón cuando está en estado "Cerrar" */
.ver-mas-btn.cerrar {
    background-color: #6c757d; /* Un color gris, por ejemplo */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.ver-mas-btn.cerrar:hover {
    background-color: #5a6268;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/* Responsividad para la descripción */
@media (max-width: 768px) {
    .product-description {
        margin-top: 20px;
        padding: 15px;
    }
    .product-description h3 {
        font-size: 20px;
        margin-bottom: 10px;
    }
    .product-description p {
        font-size: 15px;
    }
}


.detalle-pc-contenido {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos se apilen en pantallas pequeñas */
    gap: 40px;
    background: linear-gradient(145deg, #1a0303, #2e0808);
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(255, 68, 0, 0.4);
    align-items: flex-start; /* Alinea los ítems al inicio del contenedor */
}

.detalle-pc-imagen {
    /* Ajustes para que la columna de imagen se comporte mejor */
    flex: 1; /* Permite que crezca y se encoja */
    min-width: 450px; /* Ancho mínimo para evitar que se comprima demasiado */
    max-width: 50%; /* Mantiene el ancho máximo para la columna izquierda */

    position: relative;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 10px;

    display: flex;
    flex-direction: column; /* Hace que sus hijos (carrusel y descripción) se apilen verticalmente */
    justify-content: flex-start; /* Alinea los ítems al principio (arriba) */
    align-items: center; /* Centra los ítems horizontalmente */

    min-height: 400px;
}

.detalle-pc-imagen img {
    max-width: 100%;
    max-height: 400px; /* Ajusta esto si tus imágenes son muy grandes */
    object-fit: contain; /* Ajusta la imagen dentro de su contenedor */
    border-radius: 8px;
    background-color: white;
}

.badge-detalle-descuento {
    position: absolute;
    top: 15px;
    left: 15px;
    background: linear-gradient(45deg, #d62828, #ff4d00);
    color: white;
    padding: 8px 15px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 1.1em;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.detalle-pc-info {
    /* Ajustes para que la columna de información se comporte mejor */
    flex: 1; /* Permite que crezca y se encoja */
    min-width: 400px; /* Ancho mínimo para evitar que se comprima demasiado */
    max-width: 50%; /* Mantiene el ancho máximo para la columna derecha */

    padding: 0 10px;
}

.titulo-detalle-pc {
    font-size: 3em;
    color: #ffb300; /* Tu color secundario brillante */
    margin-top: 0;
    margin-bottom: 15px;
    text-shadow: 0 0 12px rgba(255, 179, 0, 0.7);
}

.precios-detalle {
    margin-bottom: 25px;
    display: flex;
    align-items: baseline;
    gap: 15px;
}

.precio-detalle-actual {
    font-size: 2.8em;
    font-weight: bold;
    color: #00ff8c; /* Verde vibrante para el precio actual */
    text-shadow: 0 0 10px rgba(0, 255, 140, 0.7);
}

.precio-detalle-anterior {
    font-size: 1.5em;
    color: #888;
    text-decoration: line-through;
}

.descripcion-corta {
    font-size: 1.1em;
    color: #ccc;
    margin-bottom: 30px;
    line-height: 1.6;
}

.especificaciones-detalle {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 35px;
    box-shadow: inset 0 0 10px rgba(255, 68, 0, 0.2);
}

.especificaciones-detalle h2 {
    font-size: 1.6em;
    color: #ff4d00; /* Tu color principal para títulos de sección */
    margin-top: 0;
    margin-bottom: 20px;
    border-bottom: 2px solid rgba(255, 68, 0, 0.5);
    padding-bottom: 10px;
}

.especificaciones-detalle ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr; /* Una columna por defecto */
    gap: 10px;
}

.especificaciones-detalle li {
    font-size: 1.05em;
    color: #eee;
    padding: 5px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}

.especificaciones-detalle li:last-child {
    border-bottom: none;
}

.especificaciones-detalle li strong {
    color: #ffb300; /* Color para destacar las categorías */
    min-width: 150px; /* Asegura un ancho mínimo para la etiqueta */
    display: inline-block;
}

/* ESPECIFICACIONES DE ENVIO */

.especificaciones-envio {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 35px;
    box-shadow: inset 0 0 10px rgba(255, 68, 0, 0.2);
}

.especificaciones-envio h2 {
    font-size: 1.6em;
    color: #ff4d00; /* Tu color principal para títulos de sección */
    margin-top: 0;
    margin-bottom: 20px;
    border-bottom: 2px solid rgba(255, 68, 0, 0.5);
    padding-bottom: 10px;
}

.especificaciones-envio ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr; /* Una columna por defecto */
    gap: 10px;
}

.especificaciones-envio li {
    font-size: 1.05em;
    color: #eee;
    padding: 5px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}

.especificaciones-envio li:last-child {
    border-bottom: none;
}

.especificaciones-envio li strong {
    color: #ffb300; /* Color para destacar las categorías */
    min-width: 150px; /* Asegura un ancho mínimo para la etiqueta */
    display: inline-block;
}

.tag {
  padding: 4px 8px;
  border-radius: 5px;
  font-size: 0.9em;
  display: inline-block;
  margin-top: 5px;
}

.tag.tag-flex {
    position: relative; /* Necesario para posicionar el tooltip */
    cursor: help; /* Cambia el cursor para indicar que hay información */
    display: inline-flex; /* Asegura que el span se comporte bien con el texto */
    align-items: center;
    padding: 5px 10px;
    border-radius: 5px;
    background-color: #6c757d;
    color: white;
    font-weight: bold;
}

/* Estilos para el tooltip en sí */
.tag.tag-flex::after, .tag.tag-express::after, .tag.tag-sinstock::after { /* Aplica a ambos tipos de tag */
    content: attr(data-tooltip); /* Usa el texto del atributo data-tooltip */
    position: absolute;
    bottom: 120%; /* Muestra el tooltip encima del span */
    left: 50%;
    transform: translateX(-50%);
    background-color: #333; /* Fondo oscuro para el tooltip */
    color: #fff; /* Texto blanco */
    padding: 15px 15px; /* Más padding para mejor legibilidad */
    border-radius: 6px;
    white-space: normal; /* PERMITE que el texto se divida en varias líneas */
    max-width: 250px; /* Establece un ANCHO MÁXIMO para el tooltip */
    text-align: center; /* Centra el texto dentro del tooltip */
    font-size: 0.9rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1000;
    pointer-events: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

/* Flecha del tooltip (opcional, para que apunte hacia el tag) */
.tag.tag-flex::before, .tag.tag-express::before, .tag.tag-sinstock::before { /* Aplica a ambos tipos de tag */
    content: '';
    position: absolute;
    bottom: 115%;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background-color: #333;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1001;
    pointer-events: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

/* Muestra el tooltip al pasar el mouse */
.tag.tag-flex:hover::after,
.tag.tag-flex:hover::before,
.tag.tag-express:hover::after,
.tag.tag-express:hover::before,
.tag.tag-sinstock:hover::after,
.tag.tag-sinstock:hover::before { /* Aplica a ambos tipos de tag */
    opacity: 1;
    visibility: visible;
}

.tag.tag-express {
    position: relative; /* Necesario para posicionar el tooltip */
    cursor: help; /* Cambia el cursor para indicar que hay información */
    display: inline-flex; /* Asegura que el span se comporte bien con el texto */
    align-items: center;
    padding: 5px 10px;
    border-radius: 5px;
    background-color: #28a745;
    color: white;
    font-weight: bold;
}

.tag.tag-sinstock {
    position: relative; /* Necesario para posicionar el tooltip */
    cursor: help; /* Cambia el cursor para indicar que hay información */
    display: inline-flex; /* Asegura que el span se comporte bien con el texto */
    align-items: center;
    padding: 5px 10px;
    border-radius: 5px;
    background-color: #347c70;
    color: white;
    font-weight: bold;
}

/* Estilos para la frase de llamada a la acción */
.cta-phrase-highlight {
    display: block; /* Ocupa todo el ancho disponible para ser un bloque de mensaje */
    background-color: #e6f7ff; /* Un azul claro suave como fondo */
    color: #0056b3; /* Un azul más oscuro y vibrante para el texto */
    padding: 12px 15px; /* Espaciado interno generoso */
    margin-bottom: 15px; /* Espacio debajo de la frase, antes del botón */
    border: 1px solid #99daff; /* Borde sutil para definir el área */
    border-radius: 8px; /* Bordes redondeados para un look moderno */
    font-size: 1.1em; /* Texto ligeramente más grande y legible */
    font-weight: 600; /* Un poco más de negrita para destacar */
    text-align: center; /* Centra el texto */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave para un efecto elevado */
    animation: fadeInScale 0.5s ease-out; /* Animación de aparición suave */
}

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

/* !!! NEW CRITICAL RULE !!! */
/* Target the form directly within .acciones-detalle */
.acciones-detalle form {
    display: flex; /* Make the form itself a flex container */
    align-items: center; /* Align items inside the form vertically */
    gap: 20px; /* Apply gap between elements inside the form (qty selector, buttons) */
    flex-wrap: wrap; /* Allow items inside the form to wrap */
    width: 100%; /* Allow the form to take full width of its parent if needed */
    justify-content: flex-start; /* Align items to the start within the form */
}

.cantidad-selector {
    width: 80px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #ff4d00;
    background-color: #0d0d0d;
    color: white;
    font-size: 1.1em;
    text-align: center;
    -moz-appearance: textfield; /* For Firefox */
    flex-shrink: 0; /* Prevents it from shrinking too much */
}

.cantidad-selector::-webkit-outer-spin-button,
.cantidad-selector::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.btn-agregar-carrito {
    padding: 15px 30px;
    border-radius: 30px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    border: none;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    flex-grow: 0; /* Prevents button from growing to take all available space */
    flex-shrink: 1; /* Allows it to shrink if needed */
    width: auto; /* Let content dictate width initially */
    max-width: 300px; /* Or even slightly less if you want them to be tighter */
}

.btn-agregar-carrito {
    background: linear-gradient(90deg, #ff4d00, #d62828);
    color: white;
    box-shadow: 0 5px 15px rgba(255, 68, 0, 0.6);
}

.btn-agregar-carrito:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 20px rgba(255, 68, 0, 0.8);
    background: linear-gradient(90deg, #d62828, #ff4d00);
}

.btn-agregar-carrito svg {
    fill: white; /* Asegura que el icono del carrito sea blanco */
    margin-right: 5px;
}

.btn-comprar-ahora {
    background-color: #222;
    color: #ff4d00;
    border: 2px solid #ff4d00;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}

.btn-comprar-ahora:hover {
    transform: translateY(-3px) scale(1.02);
    background-color: #ff4d00;
    color: white;
    box-shadow: 0 8px 20px rgba(255, 68, 0, 0.8);
}

/* --- Responsividad para la Página de Detalle --- */
@media (max-width: 992px) {
    .detalle-pc-contenido {
        flex-direction: column; /* Apila imagen y info en pantallas medianas */
        align-items: center;
        gap: 30px;
        padding: 25px;
    }
    .detalle-pc-imagen,
    .detalle-pc-info {
        max-width: 100%; /* Ocupan todo el ancho disponible */
        flex-basis: auto; /* Permite que se adapten al contenido */
        padding: 0; /* Elimina padding horizontal extra */
    }
    .detalle-pc-imagen {
        width: 100%;
        min-height: 350px;
    }
    .detalle-pc-imagen img {
        max-height: 350px;
    }
    .titulo-detalle-pc {
        font-size: 2.5em;
        text-align: center;
    }
    .precios-detalle,
    .descripcion-corta {
        text-align: center;
        justify-content: center;
    }
    .especificaciones-detalle h2 {
        text-align: center;
    }
    .especificaciones-detalle ul {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 2 columnas o más en tablet */
    }
    .acciones-detalle {
        flex-direction: column; /* Apila los botones */
        gap: 15px;
    }
    .btn-agregar-carrito,
    .btn-comprar-ahora {
        max-width: 80%; /* Ancho para los botones apilados */
    }
}

@media (max-width: 768px) {
    .seccion-detalle-pc {
        padding: 20px 10px;
    }
    .detalle-pc-contenido {
        padding: 20px;
        gap: 25px;
    }
    .detalle-pc-imagen {
        min-height: 280px;
    }
    .detalle-pc-imagen img {
        max-height: 280px;
    }
    .titulo-detalle-pc {
        font-size: 2em;
    }
    .precio-detalle-actual {
        font-size: 2.2em;
    }
    .precio-detalle-anterior {
        font-size: 1.2em;
    }
    .especificaciones-detalle {
        padding: 20px;
    }
    .especificaciones-detalle h2 {
        font-size: 1.4em;
    }
    .especificaciones-detalle ul {
        grid-template-columns: 1fr; /* Una columna en móviles */
    }
    .detalle-pc-descripcion {
        padding: 20px;
        margin-top: 30px;
    }
    .detalle-pc-descripcion h2 {
        font-size: 1.6em;
    }
    .detalle-pc-descripcion p {
        font-size: 1em;
    }
}

/* Sección de Videos del Producto */
/* Sección de Videos del Producto */
/* Sección de Videos del Producto */
.seccion-videos-producto {
    margin-top: 0;
    margin-bottom: 0;
    padding: 20px;
    background-color: #1a1a1a; /* Fondo oscuro */
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 255, 20, 0.3); /* Sombra de neón verde */
    color: #eee;
}

.titulo-videos {
    font-size: 2.5em;
    color: #39FF14; /* Color verde neón para el título */
    text-align: center;
    margin-bottom: 30px;
    text-shadow: 0 0 8px rgba(57, 255, 20, 0.5);
}

.videos-grid {
    display: grid;
    /* Reducimos el minmax para que los embeds individuales sean más pequeños */
    /* Queremos que se adapten, pero con un tamaño base más controlable */
    /* Por ejemplo, un minmax de 280px para videos individuales y que ocupe 1fr */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px; /* Espacio entre videos */
    justify-content: center; /* Centra los videos si no llenan todas las columnas */
}

/* Regla para centrar un solo video */
/* Esto se aplica cuando solo hay un elemento en el grid */
.videos-grid:has(.video-item:only-child) {
    display: flex; /* Cambiamos a flexbox para un control de centrado más preciso */
    justify-content: center; /* Centra horizontalmente el único elemento */
}

.video-item {
    background-color: #222; /* Fondo de cada video */
    border-radius: 8px;
    overflow: hidden; /* Asegura que el iframe no se desborde */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease;

    /* Añadimos un max-width al video-item para controlar su tamaño máximo,
       especialmente cuando está solo o cuando la columna 1fr es muy grande */
    max-width: 560px; /* Tamaño típico de video de YouTube/Facebook */
    margin: 0 auto; /* Centra el item dentro de su propia celda si el grid permite espacio extra */
}

.video-item:hover {
    transform: translateY(-5px); /* Efecto al pasar el ratón */
}

.video-embed-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* Los bordes, sombras y transiciones del contenedor principal .video-item ya se aplican aquí */
    /* Puedes añadir bordes y sombras adicionales si quieres un doble efecto */
    border-radius: 8px; /* Bordes redondeados para el contenedor de video */
    border: 1px solid #222; /* Borde oscuro para el embed */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Sombra sutil para el embed */
}

.video-embed-container.youtube.short {
    padding-top: 177.77%; /* 16 / 9 = 1.777... (o 177.77%) */
}

.video-embed-container.youtube {
    padding-top: 56.25%; /* 9 / 16 = 0.5625 (o 56.25%) */
}


/* Estilos específicos para TikTok (videos verticales) */
.video-embed-container.tiktok::before {
    padding-top: 177.77%; /* Proporción aproximada para videos verticales de TikTok (9:16 invertido) */
}

/* Efecto de neón sutil al pasar el ratón sobre el contenedor del embed */
.video-embed-container:hover {
    box-shadow: 0 0 15px rgba(0, 255, 20, 0.3); /* Sombra de neón verde */
    border-color: #39FF14; /* Borde verde neón */
}

.video-embed-container.youtube {
    border-color: #FF0000; /* Rojo de YouTube */
}

.video-embed-container.tiktok {
    border-color: #00F2EA; /* Azul/Cian de TikTok */
}

.video-embed-container.facebook {
    border-color: #1877F2; /* Azul de Facebook */
}

/* Ajustes para responsividad */
@media (max-width: 768px) {
    .titulo-videos {
        font-size: 2em;
    }
    .videos-grid {
        /* En móviles, sigue siendo 1 columna, pero el max-width del item lo controlará */
        grid-template-columns: 1fr;
    }
    .video-item {
        max-width: 100%; /* Permite que el video ocupe todo el ancho disponible en móvil */
    }
    .video-item iframe {
        /* Para móviles, puedes ajustar la altura si los 315px son demasiado.
           Una relación de aspecto responsiva es mejor con un wrapper.
           Pero si no, puedes fijar una altura, ej: */
        height: 220px; /* Ajusta la altura para móviles si es necesario */
    }
    .video-item iframe[src*="tiktok.com"] {
        height: 400px; /* Ajusta la altura de TikTok en móviles */
    }
}



/* --- Nueva Sección Contenedora para Especificaciones Detalladas --- */
.especificaciones-detalladas {
    margin-top: 0;
    margin-bottom: 0;
    width: 100%;
    background-color: #0c0c0c;
    padding: 60px 20px;
    box-shadow: inset 0 0 50px rgba(0, 255, 255, 0.05), 0 0 30px rgba(0, 0, 0, 0.7);
    border-top: 1px solid rgba(0, 255, 255, 0.1);
    border-bottom: 1px solid rgba(0, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.especificaciones-detalladas::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #00ffff, transparent);
    filter: blur(2px);
    opacity: 0.7;
}

.especificaciones-detalladas::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #00ffff, transparent);
    filter: blur(2px);
    opacity: 0.7;
}

.pc-especificaciones-tabla {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 30px;
    background: linear-gradient(145deg, #1f1f1f, #2a2a2a);
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 255, 255, 0.1);
    color: #e0e0e0;
    border: 2px solid transparent;
    transition: box-shadow 0.4s ease-in-out, border 0.4s ease-in-out;
}

.pc-especificaciones-tabla:hover {
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.7), 0 0 30px rgba(0, 255, 255, 0.4);
    border: 2px solid #00ffff;
}

.pc-especificaciones-tabla h2{
    font-size: 2rem;
    color: #fff;
    text-align: center;
    margin-bottom: 30px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 15px;
    
    background: linear-gradient(90deg, #4CAF50, #8BC34A, #00BCD4, #2196F3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 5px rgba(0, 255, 255, 0.5));
}

.pc-especificaciones-tabla h2::after{
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, #00bcd4, #2196f3);
    border-radius: 3px;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
    animation: pulseLine 3s infinite ease-in-out; 
}

.pc-especificaciones-tabla table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.pc-especificaciones-tabla th,
.pc-especificaciones-tabla td {
    padding: 15px 20px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 1.05rem;
    color: #e0e0e0;
}

.pc-especificaciones-tabla th {
    background-color: rgba(0, 255, 255, 0.05);
    font-weight: 700;
    color: #00ffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 1.1rem;
}

.pc-especificaciones-tabla tbody tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.1);
}

.pc-especificaciones-tabla tbody tr:hover {
    background-color: rgba(0, 255, 255, 0.08);
    color: #00ffff;
}

.pc-especificaciones-tabla td:first-child {
    font-weight: 600;
    color: #bdbdbd;
}

/* Media Queries para Responsividad de la sección contenedora */
@media (max-width: 992px) {
    .especificaciones-detalladas {
        padding: 40px 15px;
    }
}

@media (max-width: 768px) {
    .especificaciones-detalladas {
        padding: 30px 10px;
        margin-top: 30px;
    }
}

@media (max-width: 480px) {
    .especificaciones-detalladas {
        padding: 20px 10px;
        margin-top: 25px;
    }
}

/* (Mantén tus media queries para .pc-especificaciones-tabla y sus elementos anidados como los tenías) */
@media (max-width: 768px) {
    .pc-especificaciones-tabla {
        padding: 20px;
    }
    .pc-especificaciones-tabla h2 {
        font-size: 1.6rem;
        margin-bottom: 20px;
    }
    .pc-especificaciones-tabla th,
    .pc-especificaciones-tabla td {
        padding: 10px 15px;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .pc-especificaciones-tabla {
        padding: 15px;
    }
    .pc-especificaciones-tabla h2 {
        font-size: 1.4rem;
        margin-bottom: 15px;
    }
    .pc-especificaciones-tabla th,
    .pc-especificaciones-tabla td {
        padding: 8px 10px;
        font-size: 0.85rem;
    }
}

/* --- Nueva Sección de Productos Relacionados --- */
/* Animación para la línea del título */
@keyframes pulseLine {
    0% { box-shadow: 0 0 10px rgba(0, 255, 255, 0.6); }
    50% { box-shadow: 0 0 25px rgba(0, 255, 255, 1); }
    100% { box-shadow: 0 0 10px rgba(0, 255, 255, 0.6); }
}

/* --- Sección de Productos Relacionados --- */
.productos-relacionados-seccion {
    width: 100%;
    padding: 40px 20px;
    background-color: #0c0c0c;
    box-shadow: inset 0 0 50px rgba(0, 255, 255, 0.05), 0 0 30px rgba(0, 0, 0, 0.7);
    border-top: 1px solid rgba(0, 255, 255, 0.15);
    border-bottom: 1px solid rgba(0, 255, 255, 0.15);
    position: relative;
    overflow: hidden;
}

.productos-relacionados-seccion::before,
.productos-relacionados-seccion::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #00ffff, transparent);
    filter: blur(2px);
    opacity: 0.7;
}

.productos-relacionados-seccion::before { top: 0; }
.productos-relacionados-seccion::after { bottom: 0; }

.productos-relacionados-seccion h2 {
    font-size: 2.5rem;
    color: #fff;
    text-align: center;
    margin-bottom: 40px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 15px;
    
    background: linear-gradient(90deg, #00c7e2, #00ffff, #00c7e2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.7));
}

.productos-relacionados-seccion h2::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 120px;
    height: 5px;
    background: linear-gradient(90deg, #00c7e2, #00ffff, #00c7e2);
    border-radius: 3px;
    box-shadow: 0 0 20px rgba(0, 255, 255, 1);
    animation: pulseLine 3s infinite ease-in-out;
}

.relacionados-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
    justify-content: center;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 10px;
}

.card-relacionado {
    position: relative;
    background: linear-gradient(145deg, #181818, #282828);
    color: #e0e0e0;
    border-radius: 18px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 255, 255, 0.15);
    text-align: center;
    text-decoration: none;
    transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out, border 0.4s ease-in-out;
    border: 2px solid transparent;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

.card-relacionado:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(0, 255, 255, 0.5);
    border: 2px solid #00ffff;
}

.card-relacionado img {
    width: 90%;
    max-height: 190px;
    object-fit: contain;
    border-radius: 12px;
    margin: 0 auto 20px;
    transition: transform 0.3s ease;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 5px;
}

.card-relacionado img:hover {
    transform: scale(1.08);
}

.card-relacionado h3 {
    margin: 10px 0 12px;
    font-size: 1.6rem;
    color: #00ffff;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.7);
    min-height: 2.5rem;
    line-height: 1.2;
}

.card-relacionado-precio-lista {
    font-size: 1.15em;
    color: #999;
    text-decoration: line-through;
    margin-bottom: 8px;
    font-weight: 500;
}

.card-relacionado-precio-final {
    font-size: 1.8rem;
    font-weight: bold;
    color: #00ff8c;
    margin-top: auto;
    text-shadow: 0 0 10px rgba(0, 255, 140, 0.7);
}

.etiqueta-nuevo, .etiqueta-destacado, .badge-relacionado-descuento {
    position: absolute;
    font-weight: bold;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.8em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.etiqueta-nuevo {
    top: 10px;
    left: 10px;
    background: linear-gradient(45deg, #00e0b7, #00ffcc);
    color: #1a1a1a;
    z-index: 10;
}

.etiqueta-arriba {
    top: 10px;
}

.etiqueta-abajo {
    top: 50px;
}

.etiqueta-destacado {
    top: 10px;
    right: 10px;
    background: linear-gradient(45deg, #ffc107, #ffdb58);
    color: #1a1a1a;
    z-index: 10;
}

.badge-relacionado-descuento {
    top: 10px;
    left: 10px;
    background: linear-gradient(45deg, #e74c3c, #c0392b);
    color: white;
    z-index: 11;
    font-size: 0.9em;
    padding: 7px 12px;
}

/* --- Media Queries para Responsividad (Opcional, pero recomendado) --- */
@media (max-width: 768px) {
    .productos-relacionados-seccion h2 {
        font-size: 2rem;
    }
    .relacionados-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
    }
    .card-relacionado {
        padding: 15px;
    }
    .card-relacionado h3 {
        font-size: 1.3rem;
    }
    .card-relacionado-precio-final {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .productos-relacionados-seccion {
        padding: 30px 10px;
    }
    .productos-relacionados-seccion h2 {
        font-size: 1.8rem;
        margin-bottom: 30px;
    }
    .relacionados-grid {
        grid-template-columns: 1fr;
        max-width: 300px;
    }
    .card-relacionado {
        width: 100%;
        margin: 0 auto;
    }
}