/*
==========================================================================
 OCULTAR NAVEGACIÓN DE PESTAÑAS DE PRODUCTO
==========================================================================
 * Ocultamos solo los enlaces de las pestañas (la lista <ul>) para no afectar
 * al contenido que estas albergan, como el acordeón de descripción personalizado.
 * Esta es una solución visual que mantiene la estructura HTML intacta.
*/
body.single-product .woocommerce-tabs .tabs.wc-tabs {
    display: none;
}

/*
==========================================================================
 AJUSTE DE ESPACIADO ENTRE ACORDEONES
==========================================================================
*/

.woocommerce-tabs.wc-tabs-wrapper {
	margin-top: 0rem; /* Reduce el margen superior de 2rem a 1rem */
    padding-top: 0;   /* Elimina el padding superior */
}
  
/* * A cualquier acordeón que siga inmediatamente a otro (.om-desc-wrapper + .om-desc-wrapper),
 * le quitamos el borde superior y reducimos drásticamente su margen superior
 * para que queden más juntos.
*/
/* Resetea margen y padding de los contenedores */
/* Contenedor: sin margen ni padding extra */
/* Elimina el margen y la línea entre bloques consecutivos */
.om-desc-wrapper + .om-desc-wrapper {
    margin-top: 1rem; /* Reduce el margen superior de 2rem a 1rem */
    padding-top: 0;   /* Elimina el padding superior */
    border-top: none; /* Elimina la línea horizontal */
}

/* Reducimos el margen inferior por defecto del contenedor de la descripción
   para juntarlo más con nuestros acordeones personalizados. */
body.single-product div.product .woocommerce-tabs.wc-tabs-wrapper {
    margin-bottom: 1rem; /* O el valor que prefieras */
  	padding: 0;          /* Elimina el padding interior */
}

/* Aumenta el espacio superior de la sección de productos relacionados */
.single-product section.related.products {
    margin-top: 5rem; /* Puedes ajustar este valor si quieres más o menos espacio */
}

.related ul.products li.product,
.upsells ul.products li.product,
.cross-sells ul.products li.product {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.related ul.products li.product .woocommerce-loop-product__title,
.related ul.products li.product .price {
    min-height: 3em; /* Ajusta según tu diseño para que todos tengan mismo alto */
} 

/***********************************************************************************/

/*
==========================================================================
 ESTILOS DESCRIPCIÓN DE PRODUCTO COLAPSABLE
 PREFIJO: .om-desc-
==========================================================================
*/

/* Contenedor principal del bloque de descripción */
.om-desc-wrapper {
    margin-top: 0rem;
    padding-top: 1rem;
    border-top: 1px solid #f0f0f0;
}

/* El elemento <details> que funciona como contenedor del acordeón */
.om-desc-collapsible {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden; /* Necesario para que el border-radius se aplique al contenido */
}

/* El elemento <summary> que es el título clickeable */
.om-desc-summary {
    display: flex; /* Usamos flex para alinear el título y el icono */
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    cursor: pointer;
    background-color: #ffffff;
    list-style: none; /* Elimina el marcador/flecha por defecto del navegador */
}

/* Elimina el marcador de <summary> en todos los navegadores */
.om-desc-summary::-webkit-details-marker {
    display: none;
}

.om-desc-summary h2 {
  margin: 0; /* Esto anula el margen por defecto del h2 */
}

/* El título H4 dentro del summary */
.om-desc-summary h4 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
}

/* El icono personalizado (+/-) creado con un pseudo-elemento */
.om-desc-summary::after {
    content: '+'; /* Icono por defecto (cerrado) */
    font-size: 1.8rem;
    font-weight: 300;
    line-height: 1;
    color: #555;
    transition: transform 0.3s ease-in-out; /* Animación suave para la rotación */
}

/* Cuando el <details> está abierto, cambiamos el icono a '-' y lo rotamos */
.om-desc-collapsible[open] > .om-desc-summary::after {
    content: '−'; /* Carácter de resta, visualmente es un - */
    transform: rotate(180deg);
}

/* Contenedor del contenido para aplicar padding y animaciones */
.om-desc-content {
    padding: 0 1.5rem; /* Padding horizontal, el vertical lo da la animación */
    overflow: hidden;
    transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out; /* Transición suave */
    max-height: 0; /* Cerrado por defecto */
}

/* Estado abierto: se revela el contenido con su altura máxima y padding vertical */
.om-desc-collapsible[open] > .om-desc-content {
    padding: 1.5rem;
  	background-color: #ffffff;
    max-height: 1000vh; /* Valor alto para asegurar que quepa cualquier contenido */
}

/*
==========================================================================
 ESTILOS PARA LISTA Sellos de Confianza (Beneficios)
==========================================================================
*/
/* 1. Estilos para el bloque de beneficios de MÓVIL (visible por defecto).
 * Esta regla se aplica en todas las pantallas.
 */
.om-benefits-row.om-benefits-mobile-only {
    display: flex; /* Lo hace visible */
    justify-content: space-between;
  	align-items: center;
  	flex-wrap: wrap;
  	gap: 12px; 
  	margin-bottom: 1rem;
}

.om-benefit {
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  	text-align: center;
  	flex: 1;
  	min-width: 40px;
}  

.om-benefit svg {
     width: 40px;
     height: 40px;
     stroke-width: 1.2px;
  
}

/* 2. El bloque de beneficios de ESCRITORIO está OCULTO por defecto. */
.om-benefits-row.om-benefits-desktop {
    display: none; /* Lo oculta por defecto en todas las resoluciones */
}

/*
==========================================================================
 Media Query para ESCRITORIO
 Sobrescribe los estilos mobile-first para pantallas más grandes.
==========================================================================
*/
@media (min-width: 769px) {
    /* Oculta el bloque de móvil. */
    .om-benefits-row.om-benefits-mobile-only {
        display: none;
    }

    /* Muestra y estiliza el bloque de escritorio. */
    .om-benefits-row.om-benefits-desktop {
        display: flex; /* Lo hace visible */       
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 1.5rem 0.5rem;
        border-top: 1px solid #e0e0e0;
        margin-top: 0rem;
        margin-bottom: 0.1rem;
        gap: 6rem;
    }

    .om-benefit {
        display: flex;
        flex-direction: row;
        align-items: center;
      	flex: none;
        gap: 0.5rem;
        font-size: 1.2rem;
        color: #333;
        font-weight: 500;
    }

    .om-benefit svg {
        width: 58px;
        height: 58px;
        stroke-width: 1.2px;
    }    
}
/* Por defecto: NO mostrar beneficios (móvil) 
.om-benefits-row {
  display: none;  
}  

.om-benefits-mobile-only { 
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px; 
  margin-bottom: 1rem;
}

/*.om-benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  min-width: 40px;
}  

.om-benefit svg {
        width: 40px;
        height: 40px;
        stroke-width: 1.2px;
    }
*/

/* Mostrar y estilizar en escritorio */
/*@media (min-width: 769px) {
  .om-benefits-mobile-only {
    display: none;
}
  
    .om-benefits-row {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 1.5rem 0.5rem;
        border-top: 1px solid #e0e0e0;
        margin-top: 0rem;
        margin-bottom: -1rem;
        gap: 6rem;
    }

    .om-benefit {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.85rem;
        color: #333;
        font-weight: 500;
    }

    .om-benefit svg {
        width: 54px;
        height: 54px;
        stroke-width: 1.2px;
    }
}*/

/*
==========================================================================
 ESTILOS PARA LA REJILLA DE ESPECIFICACIONES (NUEVO)
==========================================================================
*/

/* 1. El contenedor principal se convierte en una rejilla responsive.
   Crea columnas automáticas de un mínimo de 220px. */
.om-spec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem; /* Espacio entre las tarjetas */
}

/* 2. Cada especificación es una "tarjeta" con su propio estilo. */
.om-spec-item {
    background-color: #f9f9f9;
    padding: 0.75rem 1rem;
    border-radius: 6px;
  	border: 1px solid #e9e9e9; /* Añadimos un borde sutil */
    display: flex;
    justify-content: space-between; /* Alinea etiqueta y valor en extremos opuestos */
    align-items: center;
}

/* 3. La etiqueta del atributo (ej: "Color:") */
.om-spec-label {
    font-weight: 600;
    color: #333;
    padding-right: 1rem; /* Espacio para que no se pegue al valor */
}

/* 4. El valor del atributo (ej: "40") */
.om-spec-value {
    color: #555;
    text-align: right; /* Alinea el valor a la derecha de su espacio */
}

@media (min-width: 769px) {
  /* 1. El contenedor principal ahora será un simple bloque. */
	.om-spec-grid {
    	display: block;
    	margin-top: 0rem; /* Espacio opcional */
  		width: fit-content;
}

/* 2. Cada especificación será una mini-rejilla de 2 columnas. */
	.om-spec-item {
    	display: grid;
    	grid-template-columns: max-content 1fr; /* <-- La clave de la solución */
    	gap: 1.5rem; /* Espacio entre etiqueta y valor */
    	padding: 0.75rem 1rem;
    	border-bottom: 1px solid #e0e0e0; /* #f0f0f0 Separador entre filas */
    	align-items: center;
  		background-color: #f9f9f9; /* Mantenemos el fondo gris */
    	border-radius: 6px; /* Bordes redondeados */
    	border: 1px solid #e9e9e9;
    	margin-bottom: 1rem; /* Pequeño espacio entre items si hay varios */
	}
	.om-spec-item:last-child {
    	border-bottom: none; /* Elimina la línea del último elemento */
	}

/* 3. La etiqueta del atributo. */
	.om-spec-label {
    	font-weight: 600;
    	color: #333;
	}

/* 4. El valor del atributo. */
	.om-spec-value {
    	color: #555;
    	text-align: left; /* Alineamos a la izquierda para mayor claridad */
	}
}

/*
==========================================================================
 CONFIGURACION DEL BOTON INTERNO DENTRO DE LAS DESCRIPCIONES
==========================================================================
*/ 
  
/* Estilo para el botón personalizado en la descripción del producto */
.cta-descripcion {
    display: inline-block; /* Ocupa su propia línea */ /*inline-block;  Permite darle relleno y alineación */
  	/*width: fit-content; /* Ajusta el ancho al contenido */
    background-color: #E66C0A; /* Color de fondo naranja (puedes cambiarlo) */
    color: #FFFFFF; /* Color del texto (blanco). !important para asegurar que se aplique */
    padding: 10px 18px; /* Relleno interno: 12px arriba/abajo, 20px a los lados */
    border-radius: 8px; /* Bordes redondeados */
  	font-weight:600;
    text-decoration: none; /* Quita el subrayado del enlace */
    font-weight: bold; /* Texto en negrita */
    text-align: center; /* Centra el texto */
    margin-top: 8px; /* Un poco de espacio por encima */
    margin-bottom: 8px; /* Un poco de espacio por debajo */
    transition: background-color 0.3s ease; /* Transición suave para el color de fondo */
}

/* Efecto al pasar el ratón por encima (hover) */
.cta-descripcion:hover {
    background-color: #c45a09; /* Un naranja un poco más oscuro */
    color: #FFFFFF; /* Mantiene el texto en blanco */
}