/*Global*/
:root {
    /* Colores base */
    --color-primario: #01203d;      
    --color-primario-alt: #0A2540;  
    --color-primario-hover: #0A3264;
    --color-secundario: #0A92F5;   
    --color-acento: #7DA4D4;      

    /* Texto */
    --color-texto: #64748B;         
    --color-texto-claro: #8a94a3;  
    --color-texto-tabs: #5c6773;   

    /* Fondos */
    --color-fondo-gris: #F7F8FA;    
    --color-fondo-tabs: #eef1f5;    
    --color-blanco: #ffffff;

    /* Bordes */
    --color-borde: #E2E8F0;         

    /* Badges */
    --color-badge-bg: #dee9f8;     
    --color-badge-texto: #1a5fb4;  

    /* Carrusel */
    --color-dot: #c7cfda;          
}

*, *::before, *::after {
    box-sizing: border-box;
}

html{scrollbar-gutter: stable}


/*Patrones*/
.spectra-fullwidth-wrapper {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.spectra-fullwidth-wrapper .wp-block-uagb-container.uagb-block-62a3907f {
	padding-top: 60px!important;
	padding-bottom: 20px!important;
}

.spectra-fullwidth-wrapper .uagb-block-0acf921d .uagb-ifb-title, .spectra-fullwidth-wrapper .uagb-block-0acf921d .uagb-ifb-desc {
	margin-bottom: 0!important;
}

.btn-degradado .wp-block-button__link{
    background: linear-gradient(136deg, #0A75F0, #15c3f0, #0A75F0);
    background-size: 200% auto;
    color: #ffffff !important;
    border-radius: 8px;
    font-weight: 500;
}

.btn-degradado .wp-block-button__link:hover{
    background-position: right center;
}

/*Código página*/
.container-cover{
	max-width: 1275px;
    margin: auto;
	display: flex;
    justify-content: flex-start;
}

.producto-breadcrumbs{
	background-color: var(--color-fondo-gris);
	margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    max-width: 100vw;
    width: 100vw;
	padding: 20px;
	font-size: 14px;
	text-align: center;
}

.producto-breadcrumbs .container-cover *{
	color: var(--color-texto);
}

.producto-breadcrumbs .container-cover a:hover{
	color: var(--color-secundario);
}

.product-layout {
    color: var(--color-texto);
    line-height: 1.6;
}

.producto-hero {
    max-width: 1275px;
    margin: 50px auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.imagen-principal {
    position: relative;
	width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    overflow: hidden;
    background-color: var(--color-fondo-gris);
}

.producto-ref-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 10;
    background-color: var(--color-primario);
    color: var(--color-blanco);
    padding: 0.5rem 1.6rem;
    border-radius: 6px;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
	box-shadow: 4px 4px 25px rgba(255, 255, 255, 0.3);
}

.imagen-principal img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.producto-hero-datos {
    display: flex;
    flex-direction: column;
    gap: 15px;
	max-width: 460px;
}

.categoria-producto{
	width: fit-content;
	color: var(--color-badge-texto);
    background-color: var(--color-badge-bg);
    font-size: 11px;
	padding: 5px 20px;
    border-radius: 4px;
}

.producto-titulo {
    font-size: 3.5rem;
    margin: 0;
	font-weight: 700;
    line-height: 1.15;
    color: var(--color-primario);
}

.producto-extracto {
    font-size: 1.1rem;
    line-height: 1.6;
    opacity: 0.9;
}

.producto-acciones {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.btn {
	display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 38px;
    font-weight: 500;
    border-radius: 8px;
	line-height: 1em;
    text-align: center;
}

.btn-comprar {
    background-color: var(--color-primario);
    color: var(--color-blanco)!important;
}

.btn-comprar:hover {
    background-color: var(--color-primario-hover);
    color: var(--color-blanco);
}

.btn-ficha {
    background-color: transparent;
    color: var(--color-primario)!important;
    border: 1px solid var(--color-borde);
}

.btn-ficha:hover, .btn-ficha:active {
    background-color: color-mix(in srgb, var(--color-borde) 25%, transparent);
    color: var(--color-primario);
}

.producto-texto-legal {
    font-size: 0.9rem;
}

.producto-hero-galeria {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.producto-formatos {
    padding: 5rem 0;
}

.formatos-contenedor {
    max-width: 1275px;
    margin: 0 auto;
}

.producto-formatos h2 {
    font-size: 2.2rem;
    color: var(--color-primario);
    margin-bottom: 20px;
    text-align: left;
}

.grid-formatos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.formato-item {
    padding: 1.5rem;
    border-radius: 0 0 10px 10px;
    border-top: 6px solid var(--color-acento);
    display: flex;
	background: var(--color-fondo-gris);
    flex-direction: row;
    gap: 1rem;
}

.formato-imagen {
    flex: 0 0 100px;
}

.formato-imagen img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
	background: white;
}

.formato-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
    min-width: 0;
}

.formato-ref {
	width: fit-content;
	color: var(--color-badge-texto);
    background-color: var(--color-badge-bg);
    font-size: 11px;
	padding: 3px 16px;
    border-radius: 4px;
}

.formato-info h3 {
    font-size: 1.3rem;
    margin: 0;
}

.formato-info h3 a {
    color: var(--color-primario);
    text-decoration: none;
}

.formato-extracto {
    font-size: 0.95rem;
    color: var(--color-texto);
}

.formato-extracto p {
    margin: 0;
}

.btn-ver-muestra {
    color: var(--color-secundario);
    text-decoration: none;
    font-size: 0.95rem;
	font-weight: 500!important;
}

/*TABS*/
.producto-tabs-container {
    padding: 0;
	margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    max-width: 100vw;
    width: 100vw;
}

/* --- Barra de navegación de tabs --- */
.bg-gray-tabs{
	background: #F7F8FA;
	padding: 60px 0;
	border-top: 1px solid #e2e6ec;
}

.tabs-nav {
    display: flex;
    gap: 0px;
    max-width: 1275px;
    margin: 0 auto;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
	flex-wrap: wrap;
}

.tabs-nav::-webkit-scrollbar {
    display: none;
}

.tab-btn {
    background: none;
	font-weight: 400!important;
    padding: 20px 30px 16px 30px;
    color: var(--color-texto-claro);
    cursor: pointer;
    position: relative;
    white-space: nowrap;
	border-radius: 0!important;
	border-bottom: 6px solid transparent;
	transition: all 0.4s ease;
    flex-shrink: 0;
}

.tab-btn:hover {
    background: var(--color-fondo-gris);
	color: var(--color-texto-claro);
	border-bottom: 6px solid var(--color-acento);
}

.tab-btn.active {
    color: var(--color-primario-alt);
	background: var(--color-fondo-gris);
	pointer-events: none;
	border-bottom: 6px solid var(--color-primario-alt);
}

/* --- Layout de 2 columnas --- */
.tabs-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
	background: var(--color-fondo-gris);
}

.tabs-layout:has(.tabs-carousel:empty),
.tabs-layout:not(:has(.tabs-carousel)) {
    grid-template-columns: 1fr;
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

.tab-panel h2,
.tab-panel h3 {
    color: var(--color-primario-alt);
    margin: 0 0 16px;
}

.tab-panel p {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-texto-tabs);
    margin-bottom: 16px;
}

.tab-panel img {
    max-width: 100%;
    height: auto;
}

/* Badges - Cuadros destacados*/
.tab-panel .tags{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
}

.tab-panel .tag{
    background: var(--color-badge-bg);
    color: var(--color-badge-texto);
    font-size: 13px;
    padding: 6px 20px;
    border-radius: 6px;
}

/* --- Carrusel (columna derecha) --- */
.tabs-carousel {
    background: var(--color-fondo-tabs);
    border-radius: 16px;
    overflow: hidden;
	user-select: none;
    position: sticky;
    top: 50px;
}

.carousel-track {
    display: flex;
    transition: transform 0.4s ease;
	cursor: grab;
}

.carousel-track.grabbing {
    cursor: grabbing;
}

.carousel-slide {
    min-width: 100%;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
	pointer-events: none;
}

.carousel-dots {
    display: flex;
    justify-content: center;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 0;
    width: 100%;
	pointer-events: none;
}

.carousel-dots .carousel-dots-container{
	background: var(--color-fondo-tabs);
    border-radius: 100px;
    width: fit-content;
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 5px 7px;
	pointer-events: auto;
}

.carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-dot);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease;
}

.carousel-dot.active {
    background: var(--color-primario-alt);
}

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

@media (max-width: 1315px) {
	.bg-gray-tabs{
		padding: 60px 20px;
	}
}
	
@media (max-width: 1021px) {
	.container-cover{
		justify-content: center;
	}
	
    .producto-hero {
        grid-template-columns: 1fr;
        margin: 20px auto;
        gap: 2rem;
    }

    .producto-hero-datos {
        max-width: 100%;
        order: 1;
    }

    .imagen-principal {
        order: 0;
        aspect-ratio: 16 / 9;
    }

    .producto-titulo {
        font-size: 2.4rem;
    }

    .grid-formatos {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .tab-btn {
        padding: 14px 18px 12px 18px;
        font-size: 0.95rem;
    }

    .tabs-layout {
        grid-template-columns: 1fr !important;
        gap: 32px;
        padding: 32px 0;
    }

    .tabs-carousel {
        position: relative;
		top: 0;
    }

    .producto-tabs-container > div[style] {
        padding: 32px 0 !important;
    }
}

@media (max-width: 640px) {
	.bg-gray-tabs{
		padding: 20px 0px;
	}
	
    .container-cover,
    .producto-hero,
    .formatos-contenedor {
        padding-left: 20px;
        padding-right: 20px;
    }

    .producto-formatos {
        padding: 3rem 0;
    }

    .grid-formatos {
        grid-template-columns: 1fr;
    }

    .imagen-principal {
        aspect-ratio: 16 / 9;
    }

    .producto-extracto {
        font-size: 1rem;
    }

    .btn {
        width: 100%;
        padding: 14px 20px;
    }

    .producto-acciones {
        flex-direction: column;
        gap: 12px;
    }

    .carousel-slide {
        aspect-ratio: 4 / 3;
    }
}