:root {
    --azul-marino: #001a33;
    --color-acento: #00ccff;
    --blanco: #fff;
    --gris: #556677; /* Un gris ligeramente más azulado y suave para mejorar la lectura */
    --gris-claro: #f7f9fc;
}

/* ==========================
   CONTENEDOR PRODUCTO
========================== */

.producto-detalle {
    max-width: 1400px;
    margin: 100px auto 60px;
    padding: 0 30px;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 70px;
    align-items: center;
    box-sizing: border-box;
}

.hero-producto {
    background: white;
    border-radius: 24px; /* Bordes un poco más curvos y modernos */
    padding: 40px;
    border: 1px solid rgba(0, 26, 51, 0.05);
    box-shadow: 0 20px 40px rgba(0, 26, 51, 0.04); /* Sombra más dispersa y profesional */
    transition: transform 0.4s ease;
}

.hero-producto:hover {
    transform: translateY(-4px); /* Sutil efecto dinámico al pasar el mouse */
}

.hero-producto img {
    width: 100%;
    display: block;
    object-fit: contain;
}

.info-producto h1 {
    font-size: 3.5rem; /* Un poco más imponente */
    font-weight: 800;
    color: var(--azul-marino);
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.descripcion {
    color: var(--gris);
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 35px;
}

/* ==========================
   FICHA RAPIDA (TARJETAS DE ATRIBUTOS)
========================== */

.ficha-rapida {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px; /* Un poco más de aire entre tarjetas */
}

.ficha-item {
    background: white;
    padding: 24px;
    border-radius: 16px;
    border: 1px solid rgba(0, 26, 51, 0.06);
    box-shadow: 0 10px 25px rgba(0, 26, 51, 0.03);
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Un sutil indicador premium en la esquina de cada mini-ficha */
.ficha-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--color-acento);
    opacity: 0.7;
}

.ficha-item:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 204, 255, 0.3);
    box-shadow: 0 15px 30px rgba(0, 204, 255, 0.08);
}

.ficha-item span {
    color: #7f8c8d;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    display: block;
    margin-bottom: 6px;
}

.ficha-item strong {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--azul-marino);
}

/* ==========================
   VISUALIZADOR DE COLORES
========================== */

.visualizador {
    max-width: 1400px; /* Sincronizado exactamente con el ancho de arriba */
    margin: 40px auto 80px;
    padding: 0 30px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    box-sizing: border-box;
}

.vista-360 {
    background: white;
    border-radius: 24px;
    padding: 40px;
    border: 1px solid rgba(0, 26, 51, 0.05);
    box-shadow: 0 20px 40px rgba(0, 26, 51, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
        min-height: 400px; /* aumenta la altura del contenedor */
}


}

.vista-360 img {
    width: 100%;
    max-height: 600px;
    object-fit: contain;
    transition: opacity 0.2s ease-in-out;
}

.selector-colores {
    background: white;
    border-radius: 24px;
    padding: 40px;
    border: 1px solid rgba(0, 26, 51, 0.05);
    box-shadow: 0 20px 40px rgba(0, 26, 51, 0.04);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.selector-colores h2 {
    color: var(--azul-marino);
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 25px;
}

.colores {
    display: flex;
    gap: 20px;
}

.color {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid white; /* Efecto de dona elegante */
    outline: 2px solid #e2e8f0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 3px 5px rgba(0,0,0,0.15);
}

.color:hover {
    transform: scale(1.15);
    outline-color: var(--azul-marino);
}

.color.activo {
    outline: 3px solid var(--color-acento);
    transform: scale(1.15);
    box-shadow: 0 0 15px rgba(0, 204, 255, 0.4);
}

/* Paleta de tonos específicos */
.rojo { background: #d62828; }
.blanco { background: #f1f5f9; }
.azul { background: #2563eb; }
.negro { background: #1a1a1a; }
.verde { background: #16a34a; }

/* ==========================
   ESPECIFICACIONES (TABLA)
========================== */

.especificaciones {
    max-width: 1400px;
    margin: 40px auto 80px;
    padding: 0 30px;
    box-sizing: border-box;
}

.tabla-contenedor {
    width: 100%;
    overflow-x: auto;
    border-radius: 18px; 
    box-shadow: 0 12px 35px rgba(0, 51, 102, 0.12);
}

table {
    width: 100%;
    max-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #ffffff;
    border: 2px solid rgba(0, 204, 255, 0.4); 
    box-sizing: border-box;
    overflow: hidden;
}

tr {
    transition: .25s;
}

table tr:nth-child(even){
    background: rgba(0, 204, 255, 0.03);
}

table tr:hover {
    background: rgba(0, 204, 255, 0.09);
}

td {
    padding: 16px 22px;
    border-bottom: 1px solid rgba(0, 204, 255, 0.12);
    vertical-align: middle;
    font-size: .95rem;
}

td:first-child {
    width: 38%;
    background: #002244; 
    color: #d1dbe5; 
    font-weight: 600;
    text-transform: none;
    font-size: 0.95rem;
    letter-spacing: 0.3px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); 
}

td:last-child {
    color: #2c3e50; 
    font-weight: 500;
    font-size: 0.95rem;
    line-height: 1.6;
}

table tr:last-child td{
    border-bottom: none;
}

/* ==========================
   BOTON LLAMADO A LA ACCIÓN
========================== */

.cta {
    text-align: center;
    margin: 80px 0;
}

.btn-cotizar {
    display: inline-block;
    background: var(--azul-marino); /* Fondo principal oscuro para mayor contraste */
    color: white;
    text-decoration: none;
    padding: 18px 50px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    border: 2px solid var(--azul-marino);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 10px 25px rgba(0, 26, 51, 0.15);
}

.btn-cotizar:hover {
    background: var(--color-acento);
    border-color: var(--color-acento);
    color: var(--azul-marino); /* El texto cambia dinámicamente para mantenerse legible */
    transform: translateY(-4px);
    box-shadow: 0 15px 30px rgba(0, 204, 255, 0.3);
}

/* ==========================
   RESPONSIVE
========================== */

@media(max-width: 992px) {
    .producto-detalle,
    .visualizador {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media(max-width: 768px) {
    .info-producto h1 {
        text-align: center;
        font-size: 2.6rem;
    }

    .descripcion {
        text-align: center;
    }

    .ficha-rapida {
        grid-template-columns: 1fr;
    }
    
    .selector-colores {
        text-align: center;
        align-items: center;
    }
}

/* NAVEGACIÓN DE IMÁGENES (FLECHAS) */
.vista-360 {
    position: relative; /* Permite posicionar las flechas sobre la imagen */
    background: white;
    border-radius: 24px;
    padding: 40px;
    border: 1px solid rgba(0, 26, 51, 0.05);
    box-shadow: 0 20px 40px rgba(0, 26, 51, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
            min-height: 400px; /* aumenta la altura del contenedor */

}

.vista-360 img {
    width: 100%;
    max-height: 600px;
    object-fit: contain;
    transition: opacity 0.2s ease-in-out;
}
/* Estilo base de los botones de flecha */
.flecha-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    color: var(--azul-marino);
    border: 1px solid rgba(0, 26, 51, 0.1);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    z-index: 10;
    transition: all 0.3s ease;
}

.flecha-izq { left: 20px; }
.flecha-der { right: 20px; }

/* Efectos al pasar el cursor */
.flecha-nav:hover {
    background: var(--azul-marino);
    color: white;
    border-color: var(--azul-marino);
    box-shadow: 0 6px 20px rgba(0, 26, 51, 0.15);
}

.flecha-nav:active {
    transform: translateY(-50%) scale(0.95);
}

/* Ocultar flechas en pantallas muy pequeñas para no estorbar el espacio táctil */
@media (max-width: 480px) {
    .flecha-nav {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    .flecha-izq { left: 10px; }
    .flecha-der { right: 10px; }
}

/* ==========================================
   TABLETS
========================================== */

@media (max-width: 992px){

    .producto-detalle,
    .visualizador{
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .info-producto{
        text-align: center;
    }

    .descripcion{
        text-align: center;
    }

    .ficha-rapida{
        max-width: 550px;
        margin: 0 auto;
    }

    .selector-colores{
        align-items: center;
        text-align: center;
    }

    .colores{
        justify-content: center;
    }
}

/* ==========================================
   CELULARES
========================================== */

@media (max-width: 768px){

    .producto-detalle,
    .visualizador,
    .especificaciones{
        padding-left: 15px;
        padding-right: 15px;
    }

    .producto-detalle{
        max-width:100%;
        grid-template-columns: 55% 45%;
        gap: 15px;
        align-items: center;
        overflow:hidden;
    }

    .hero-producto{
        overflow:hidden;
        padding:.2px;
    }

    .hero-producto img{
        width:100%;
        max-width:250px;
        max-height:300px;
        object-fit:contain;
        display:block;
        margin:0 auto;
        
    }

.info-producto{
    padding-left:8px;
    padding-right:5px;
}

.info-producto h1{
    font-size:1.3rem;
    line-height:1.1;
    margin-bottom:8px;
    font-weight:700;
}

.descripcion{
    font-size:.72rem;
    line-height:1.5;
    margin-bottom:12px;
    color:var(--gris);
    text-align:left;
}

    .ficha-rapida{
        grid-template-columns:repeat(2,1fr);
        gap:8px;
    }

    .ficha-item{
        padding:8px;
    }

    .ficha-item span{
        font-size:.65rem;
    }

    .ficha-item strong{
        font-size:.8rem;
    }

}
    /* COLORES */

    .visualizador{
        grid-template-columns:55% 45%;
        gap:15px;
        align-items:center;
    }

    .vista-360,
    .selector-colores{
        padding:15px;
    }

    .vista-360 img{
        max-height:180px;
    }

    .selector-colores{
        text-align:left;
        align-items:flex-start;
    }

    .selector-colores h2{
        font-size:1rem;
        margin-bottom:10px;
    }

    /* TABLA */

    td{
        padding:8px;
        font-size:.75rem;
        line-height:1.4;
    }

    td:first-child{
        width:30%;
        font-size:.75rem;
    }

    td:last-child{
        font-size:.75rem;
    }
}
/* ==========================================
   CELULARES PEQUEÑOS
========================================== */

@media (max-width: 480px){

    .producto-detalle,
    .visualizador,
    .especificaciones{
        padding-left: 10px;
        padding-right: 10px;
    }

    .info-producto h1{
        font-size: 1.7rem;
    }

    .descripcion{
        font-size: .9rem;
    }

    .hero-producto,
    .vista-360,
    .selector-colores{
        padding: 15px;
    }

    .vista-360 img,
    .hero-producto img{
        max-height: 220px;
    }

    .ficha-item{
        padding: 15px;
    }

    .ficha-item strong{
        font-size: 1.1rem;
    }

    td{
        padding: 8px;
        font-size: .75rem;
    }

    td:first-child,
    td:last-child{
        font-size: .75rem;
    }

    .color{
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 768px){

    .tabla-contenedor{
        border-radius:12px;
        overflow:hidden;
    }

    table{
        table-layout:fixed;
    }

    td:first-child{
        width:32%;
    }

    td:last-child{
        width:68%;
    }
}
#imagenColor{
    height: 400px !important;
    max-height: none !important;
    width: 100% !important;
    object-fit: contain !important;
}

.vista-360{
    min-height: 650px !important;
}
@media (max-width: 768px){

    .vista-360{
        min-height: 400px !important;
        padding: 20px;
    }

    #imagenColor{
        height: 320px !important;
        width: 100% !important;
    }

    .flecha-nav{
        width: 36px;
        height: 36px;
        font-size: .9rem;
    }

    .flecha-izq{
        left: 5px;
    }

    .flecha-der{
        right: 5px;
    }
}