/**
* Theme Name: Flicko Child
* Description: This is a child theme of Flicko, generated by Merlin WP.
* Author: <a href="http://themelexus.com/">Themelexus</a>
* Template: flicko
* Version: 1.0.19
*/

/* ==========================================================================
   1. IMPORTACIÓN DE FUENTES (Google Fonts)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Outfit:wght@800;900&display=swap');


/* ==========================================================================
   2. REGLAS GLOBALES Y TIPOGRAFÍA BASE
   ========================================================================== */

/* Aplicar tipografía ultra-legible para cuerpo, menús y botones (Todo en negro) */
body, 
p, 
a, 
input, 
textarea, 
select, 
.main-navigation a, 
.menu-item a {
    font-family: 'Inter', sans-serif !important;
    color: #000000 !important;
	
}

/* Aplicar tipografía geométrica "Bold" para títulos (Todo en negro) */
h1, h2, h3, h4, h5, h6, 
.h1, .h2, .h3, .h4, .h5, .h6, 
.entry-title, 
.product_title, 
.woocommerce-loop-product__title {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 800 !important;
    color: #000000 !important;
    letter-spacing: -0.03em !important;
}


/* ==========================================================================
   3. ESTILOS AUTOMÁTICOS PARA EL CONTENIDO DE PRODUCTOS (h2, h3, hr, p)
   ========================================================================== */

/* Títulos H2 de sección: Estilo minimalista con línea de acento a la izquierda */
.woocommerce-Tabs-panel--description h2,
.woocommerce-product-details__short-description h2,
.entry-content h2 {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 800 !important;
    font-size: 19px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-top: 35px !important;
    margin-bottom: 15px !important;
    color: #000000 !important;
    
    /* Detalle de línea vertical negra a la izquierda */
    border-left: 3px solid #000000 !important;
    padding-left: 12px !important;
}

/* Títulos H3 (Subsecciones como Especificaciones o FAQ) */
.woocommerce-Tabs-panel--description h3,
.woocommerce-product-details__short-description h3,
.entry-content h3 {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-top: 30px !important;
    margin-bottom: 15px !important;
    color: #000000 !important;
}

/* Párrafos de texto: Más aireados, limpios y cómodos de leer */
.woocommerce-Tabs-panel--description p,
.woocommerce-product-details__short-description p,
.entry-content p {
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.7 !important; /* Espacio entre líneas para lectura relajada */
    color: #111111 !important;
    margin-bottom: 18px !important;
}

/* Separadores <hr /> premium (línea negra súper fina y sutil) */
.woocommerce-Tabs-panel--description hr,
.woocommerce-product-details__short-description hr,
.entry-content hr {
    border: 0 !important;
    height: 1px !important;
    background-color: #000000 !important;
    margin: 40px 0 !important;
    opacity: 0.12 !important; /* Muy sutil para que no recargue el diseño */
}


/* ==========================================================================
   4. ACORDEÓN DE PREGUNTAS FRECUENTES (FAQ) - Estilo Minimal Recto
   ========================================================================== */

.faq-accordion details {
  border: 1px solid #111111 !important; /* Borde negro neto */
  border-radius: 0px !important; /* Esquinas rectas para un aire premium */
  padding: 16px 20px !important;
  margin-bottom: 10px !important;
  background: #F0E7DC !important;
  transition: all 0.2s ease;
}

.faq-accordion summary {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  color: #000000 !important;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-accordion summary span {
  font-size: 16px;
  transition: transform 0.2s ease;
}

.faq-accordion details[open] summary span {
  transform: rotate(90deg);
}

.faq-accordion p {
  margin-top: 12px !important;
  color: #111111 !important;
  line-height: 1.6 !important;
}


/* ==========================================================================
   5. COMPATIBILIDAD CON EL FORMULARIO DE PERSONALIZACIÓN (Opal CPV)
   ========================================================================== */

.owcpv_item_form,
.owcpv_item_form * {
    line-height: 1.25 !important;
}

/* ==========================================================================
   6. ACORDEÓN DE PERSONALIZACIÓN POR CLIC (CON JAVASCRIPT)
   ========================================================================== */

/* 1. Contenedor del formulario colapsado por defecto */
.owcpv_item_form {
    max-height: 52px !important; /* Altura exacta para mostrar solo el botón de arriba */
    overflow: hidden !important;
    transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important; /* Animación de apertura suave */
    border: 1px solid #000000 !important;
    position: relative !important;
    background-color: #ffffff !important;
    cursor: pointer !important;
    margin-bottom: 25px !important;
}

/* 2. Botón simulado arriba (Estado cerrado por defecto) */
.owcpv_item_form::before {
    content: "➔ PERSONALIZA AQUÍ EN 1 MINUTO ＋" !important;
    display: block !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    padding: 16px 20px !important;
    text-align: center !important;
    color: #000000 !important;
    background-color: #F0E7DC !important; /* Tu color crema base */
    border-bottom: 1px solid #000000 !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
    height: 52px !important;
}

/* 3. EXPANSIÓN POR CLIC: Controlado de forma estable por la clase de JS */
.owcpv_item_form.is-open {
    max-height: 2500px !important; /* Despliega todo el formulario */
    cursor: default !important;
    background-color: #FAF6F0 !important; /* Fondo crema suave al estar abierto */
}

/* 4. Cambio de texto del botón simulado (Estado abierto) */
.owcpv_item_form.is-open::before {
    content: "OCULTAR PERSONALIZACIÓN ─" !important;
    background-color: #FAF6F0 !important;
    color: #000000 !important;
}

/* 5. Ajuste del espaciado interno del formulario cuando está expandido */
.owcpv_inner_form {
    padding: 25px 20px !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   7. AJUSTE DE FONDO BLANCO PARA: formbuilder-radio owcpv_custom_radio_group
   ========================================================================== */

.owcpv_custom_radio_group .formbuilder-radio,
.owcpv_custom_radio_group label,
.formbuilder-radio label,
.owcpv_custom_radio_group .radio,
.owcpv_custom_radio_group .radio-inline {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-radius: 0px !important;
    display: inline-block !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

/* ESTADO SELECCIONADO (Al hacer clic en las opciones) */
.owcpv_custom_radio_group input[type="radio"]:checked + label,
.formbuilder-radio input[type="radio"]:checked + label,
.owcpv_custom_radio_group .radio-inline.active,
.owcpv_custom_radio_group label.active {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-color: #000000 !important;
}



/* ==========================================================================
   10. RESTAURAR TEXTOS DE LA BARRA DE ADMINISTRACIÓN DE WORDPRESS
   ========================================================================== */

/* Devuelve el color blanco/gris original a la barra superior de WP y sus iconos */
#wpadminbar{
    color: #f0f0f1 !important; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important; /* Restaura la tipografía nativa de WordPress en la barra */
}

/* Fuerza el color original en los enlaces y etiquetas de la barra */
#wpadminbar a,
#wpadminbar .ab-item,
#wpadminbar .ab-label,
#wpadminbar .ab-icon::before {
    color: #f0f0f1 !important;
}

/* Devuelve el clásico color azul celeste de WordPress al pasar el cursor (hover) */
#wpadminbar a:hover,
#wpadminbar .ab-item:hover,
#wpadminbar .ab-item:hover * {
    color: #72aee6 !important; 
}

/* ==========================================================================
   11. EXTRES
   ========================================================================== */

.product-block .quantity_cart .add_to_cart .add_to_cart_button, .product-block .quantity_cart .add_to_cart .button {
    color: #ffffff;
    margin-top: -20px;
}
ul.products li.product .posted-in {
    display: none;
}

.product-transition {
    padding: 24px 30px 0 30px;
}

.product-block .quantity_cart .add_to_cart .add_to_cart_button, .product-block .quantity_cart .add_to_cart .button {
    background-color: #F0E7DC;
}

.product-block:hover .quantity_cart .add_to_cart .add_to_cart_button, .product-block:hover  .quantity_cart .add_to_cart .button {
    background-color: #F0E7DC;
}