/*
Theme Name: OceanWP child
Theme URI: https://oceanwp.org/
Description: OceanWP WordPress theme example child theme.
Author: Nick
Author URI: https://oceanwp.org/
Template: oceanwp
Version: 1.0
*/
body{
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
body.woocommerce ul.products li.product li.title h2,
.home .woocommerce ul.products li.product li.title h2{
    margin-bottom: 0;
}
.variations .label,
.variations .variable-items-wrapper{
	padding-left:0;
	margin-left:0!important;
}
.variations .color-variable-items-wrapper{
	margin-top:0!important;
}
.woocommerce .products .product-category img,
.woocommerce ul.products li.product .woo-entry-image-swap img{
    border-radius: 8px;
}

/* ********************* estilos generales ********************/
/* ===== ESTILOS GENERALES ===== */
.single-post .entry-content {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #2d3748;
}
/* ===== JERARQUÍA DE TÍTULOS ===== */
.single-post .entry-content h1 {
    font-size: 2em;
    color: #1a365d;
    border-bottom: 3px solid #e2e8f0;
    padding-bottom: 10px;
    margin: 30px 0 20px 0;
    font-weight: 700;
}
.single-post .entry-content h2 {
    margin: 40px 0 20px 0;
    font-size: 1.5em;
    font-weight: 600;
}
.single-post .entry-content h3 {
    color: #2c3e50;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 8px;
    margin: 30px 0 15px 0;
    font-size: 1.3em;
    font-weight: 600;
}
.single-post .entry-content h4 {
    color: #2c3e50;
    padding-bottom: 5px;
    margin: 25px 0 15px 0;
    font-size: 1.1em;
    font-weight: 600;
}
/* ===== PÁRRAFOS Y ESPACIADO ===== */
.single-post .entry-content p {
    margin-bottom: 1.2em;
    text-align: left;
}
.single-post .entry-content p:last-child {
    margin-bottom: 0;
}
/* ===== LISTAS ===== */
.single-post .entry-content ul, 
.single-post .entry-content ol {
    margin-left: 25px;
    margin-bottom: 20px;
}
.single-post .entry-content li {
    margin-bottom: 8px;
    line-height: 1.6;
}
.single-post .entry-content ul li {
    list-style-type: disc;
}
.single-post .entry-content ol li {
    list-style-type: decimal;
}
/* Listas con iconos */
.single-post .entry-content ul.checklist {
    list-style: none;
    margin-left: 0;
}
.single-post .entry-content ul.checklist li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
}
.single-post .entry-content ul.checklist li:before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: #1a7f37;
    font-weight: bold;
    font-size: 1.1em;
}
/* ===== BLOQUES DESTACADOS ===== */
.single-post .entry-content blockquote,
.single-post .wp-block-quote {
    background: linear-gradient(to right, #f8f9fa, #ffffff);
    border-left: 4px solid #007cba;
    padding: 20px;
    margin: 25px 0;
    border-radius: 0 8px 8px 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    font-style: normal;
}
.single-post .entry-content blockquote p:last-child {
    margin-bottom: 0;
}
/* Bloques de información */
.single-post .entry-content .info-box {
    background: #e3f2fd;
    border-left: 4px solid #2196f3;
    padding: 15px;
    margin: 20px 0;
    border-radius: 4px;
}
.single-post .entry-content .warning-box {
    background: #fff3e0;
    border-left: 4px solid #ff9800;
    padding: 15px;
    margin: 20px 0;
    border-radius: 4px;
}
.single-post .entry-content .success-box {
    background: #e8f5e9;
    border-left: 4px solid #4caf50;
    padding: 15px;
    margin: 20px 0;
    border-radius: 4px;
}
/* ===== CÓDIGO Y PRE ===== */
.single-post .entry-content code {
    background-color: #f1f3f4;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
    color: #c7254e;
}
.single-post .entry-content pre {
    background-color: #2d3748;
    color: #e2e8f0;
    padding: 15px;
    border-radius: 6px;
    overflow-x: auto;
    margin: 20px 0;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
    line-height: 1.4;
}
.single-post .entry-content pre code {
    background: none;
    padding: 0;
    color: inherit;
    font-size: inherit;
}
/* ===== TABLAS ===== */
.single-post .entry-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.single-post .entry-content th {
    background: #4a5568;
    color: white;
    padding: 12px 15px;
    text-align: left;
    font-weight: 600;
}
.single-post .entry-content td {
    padding: 10px 15px;
    border-bottom: 1px solid #e2e8f0;
}
.single-post .entry-content tr:nth-child(even) {
    background-color: #f7fafc;
}
.single-post .entry-content tr:hover {
    background-color: #edf2f7;
}
/* ===== IMÁGENES ===== */
.single-post .entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 15px 0;
}
.single-post .entry-content .wp-block-image,
.single-post .entry-content figure {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;
}
.single-post .entry-content figcaption {
    font-style: italic;
    color: #718096;
    margin-top: 8px;
    font-size: 0.9em;
}
/* ===== ENLACES ===== */
.single-post .entry-content a {
    color: #e95112;
    text-decoration: none;
    border-bottom: 1px dotted #e95112;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.single-post .entry-content a:hover {
    color: #145a2e;
    border-bottom: 1px solid #145a2e;
}
/* ===== BOTONES ===== */
.single-post .entry-content .button {
    display: inline-block;
    background: #e95112;
    color: white;
    padding: 10px 20px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.3s ease;
    border: none;
    cursor: pointer;
    margin: 5px;
}
.single-post .entry-content .button:hover {
    background: #145a2e;
    color: white;
    text-decoration: none;
    border-bottom: none;
}
.single-post .entry-content .button-secondary {
    background: #718096;
}
.single-post .entry-content .button-secondary:hover {
    background: #4a5568;
}
/* ===== SEPARADORES ===== */
.single-post .entry-content hr {
    border: 0;
    height: 2px;
    background: linear-gradient(to right, transparent, #e2e8f0, transparent);
    margin: 40px 0;
}
/* ===== ELEMENTOS DE FORMULARIO ===== */
.single-post .entry-content input[type="text"],
.single-post .entry-content input[type="email"],
.single-post .entry-content input[type="password"],
.single-post .entry-content textarea,
.single-post .entry-content select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #cbd5e0;
    border-radius: 4px;
    font-size: 16px;
    margin: 5px 0 15px 0;
    transition: border 0.3s ease;
}
.single-post .entry-content input[type="text"]:focus,
.single-post .entry-content input[type="email"]:focus,
.single-post .entry-content input[type="password"]:focus,
.single-post .entry-content textarea:focus,
.single-post .entry-content select:focus {
    border-color: #1a7f37;
    outline: none;
    box-shadow: 0 0 0 3px rgba(26, 127, 55, 0.1);
}
/* ===== BLOQUES DE PASOS ===== */
.single-post .entry-content .step {
    counter-increment: step-counter;
    margin: 25px 0;
    padding-left: 50px;
    position: relative;
}
.single-post .entry-content .step:before {
    content: counter(step-counter);
    position: absolute;
    left: 0;
    top: 0;
    background: #1a7f37;
    color: white;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}
.single-post .entry-content .steps-container {
    counter-reset: step-counter;
    margin: 30px 0;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .single-post .entry-content {
        padding: 15px;
        font-size: 15px;
    }
    .single-post .entry-content p {
        text-align: left;
    }
    .single-post .entry-content h1 {
        font-size: 1.7em;
    }
    
    .single-post .entry-content h2 {
        font-size: 1.3em;
        padding: 12px 15px;
    }
    
    .single-post .entry-content h3 {
        font-size: 1.2em;
    }
    
    .single-post .entry-content ul, 
    .single-post .entry-content ol {
        margin-left: 20px;
    }
    
    .single-post .entry-content .step {
        padding-left: 40px;
    }
    
    .single-post .entry-content .step:before {
        width: 30px;
        height: 30px;
    }
}
@media (max-width: 480px) {
    .single-post .entry-content {
        padding: 10px;
        font-size: 14px;
    }
    
   .single-post  .entry-content h1 {
        font-size: 1.5em;
    }
    
    .single-post .entry-content h2 {
        font-size: 1.2em;
        padding: 10px 12px;
    }
}
/* ===== CLASES UTILITARIAS ===== */
.single-post .entry-content .text-center {
    text-align: center;
}
.single-post .entry-content .text-right {
    text-align: right;
}
.single-post .entry-content .text-justify {
    text-align: justify;
}
.single-post .entry-content .bold {
    font-weight: bold;
}
.single-post .entry-content .italic {
    font-style: italic;
}
.single-post .entry-content .highlight {
    background-color: #fff3cd;
    padding: 2px 4px;
    border-radius: 3px;
}
.single-post .entry-content .divider {
    height: 1px;
    background: #e2e8f0;
    margin: 30px 0;
}
/* ************************  fin estilos generales **************** */

/* ===== WOOCOMMERCE ===== */
@media (max-width: 768px) {
    body.woocommerce div.product form.cart {
        margin-top: 10px;
    }
}


/* ===== HEADER ICONS (búsqueda / carrito) — igualado al tamaño de producción, 2026-09-01 ===== */
.wcmenucart .icon-handbag,
.mobile-cart-toggle .icon-handbag {
	font-size: 22px;
}
.site-search-toggle .icon-magnifier {
	font-size: 27px;
	position: relative;
	top: 8px;
}


/* ===== Evitar parpadeo de icono incorrecto en lupa/carrito, 2026-09-01 =====
   OceanWP carga la fuente "simple-line-icons" con font-display: swap, lo que
   hace que el navegador muestre primero un glifo de una fuente de repuesto
   (visualmente distinto) y, pasado ~1s cuando la fuente real termina de
   descargarse, lo sustituya por el icono correcto (lupa/bolsa). Redeclaramos
   la misma fuente con font-display: block para que el icono se quede
   invisible ese instante en vez de mostrar el icono equivocado. */
@font-face {
	font-family: 'simple-line-icons';
	src: url('../oceanwp/assets/fonts/simple-line-icons/Simple-Line-Icons.eot?v=2.4.0');
	src: url('../oceanwp/assets/fonts/simple-line-icons/Simple-Line-Icons.eot?v=2.4.0#iefix') format('embedded-opentype'),
		url('../oceanwp/assets/fonts/simple-line-icons/Simple-Line-Icons.woff2?v=2.4.0') format('woff2'),
		url('../oceanwp/assets/fonts/simple-line-icons/Simple-Line-Icons.ttf?v=2.4.0') format('truetype'),
		url('../oceanwp/assets/fonts/simple-line-icons/Simple-Line-Icons.woff?v=2.4.0') format('woff'),
		url('../oceanwp/assets/fonts/simple-line-icons/Simple-Line-Icons.svg?v=2.4.0#simple-line-icons') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}


/* ===== Categorias de diseno (Denda): ocultar contador y quitar subrayado del titulo, 2026-09-01 ===== */
.woocommerce ul.products li.product-category .count,
ul.products li.product-category .count {
	display: none;
}
.woocommerce ul.products li.product-category .woocommerce-loop-category__title,
.woocommerce ul.products li.product-category .woo-entry-inner a,
.woocommerce ul.products li.product-category a,
ul.products li.product-category .woocommerce-loop-category__title,
ul.products li.product-category .woo-entry-inner a,
ul.products li.product-category a {
	text-decoration: none !important;
}


/* ===== Denda: efecto hover de opacidad en las imagenes de categoria, 2026-09-01 ===== */
.woocommerce ul.products li.product-category .woo-entry-image img,
ul.products li.product-category .woo-entry-image img {
	transition: opacity 0.25s ease;
}
.woocommerce ul.products li.product-category:hover .woo-entry-image img,
ul.products li.product-category:hover .woo-entry-image img {
	opacity: 0.75;
}


/* ===== Migas de pan WooCommerce: ocultar el primer nivel "Productos", 2026-09-01 =====
   OceanWP usa Breadcrumb Trail; en paginas de catalogo (tienda/categoria/producto) inserta
   automaticamente el archivo del post type "Productos" justo despues de "Inicio". Se oculta
   ese elemento (el <li> que va justo tras el de inicio, salvo que sea tambien el ultimo). */
body.woocommerce .trail-items .trail-begin + li:not(.trail-end) {
	display: none;
}


/* ===== Ficha de producto: fotos 60% / info 40%, y ocultar pestana "Informacion adicional", 2026-09-01 ===== */
.woocommerce div.product div.images,
.woocommerce.content-full-width div.product div.images {
	width: 60% !important;
}
.woocommerce div.product div.summary,
.woocommerce.content-full-width div.product div.summary {
	width: 36% !important;
}

@media (max-width: 768px) {
	.woocommerce div.product div.images,
	.woocommerce.content-full-width div.product div.images {
		width: 100% !important;
	}
	.woocommerce div.product div.summary,
	.woocommerce.content-full-width div.product div.summary {
		width: 100% !important;
	}
}


/* Pestana "Informacion adicional" eliminada por PHP via Code Snippets (2026-09-01) — ver plugin Code Snippets */


/* ===== Ficha de producto: miniaturas de galeria mas pequenas, 2026-09-02 =====
Reduce el ancho de la columna de miniaturas (por defecto se autoajustaba a
~142px). FlexSlider recalcula el ancho de la imagen principal en base al
espacio restante, asi que al encoger las miniaturas la imagen principal
gana ese espacio automaticamente. */
.woocommerce div.product div.images .flex-control-thumbs {
width: 100px !important;
}
.woocommerce div.product div.images .flex-viewport {
width: calc(100% - 115px) !important;

}

/* ===== Ficha de producto: en movil, la galeria no debe reservar los 115px/100px
   del layout de escritorio (miniaturas en columna vertical). Sin este reset la
   foto principal se quedaba encogida y las miniaturas salian minusculas, 2026-09-02 ===== */
@media (max-width: 768px) {
.woocommerce div.product div.images .flex-viewport {
width: 100% !important;
}
.woocommerce div.product div.images .flex-control-thumbs {
width: 100% !important;
}
}

/* ===== Tienda/categorias: mostrar colores disponibles bajo cada producto, 2026-09-02 =====
Muestra pequenas muestras de color (una por cada color disponible en las
variaciones) debajo del titulo del producto, en las paginas de tienda y
categoria. El HTML lo genera el fragmento de codigo "Txitxirio: colores
disponibles en categorias/tienda" (Code Snippets). */
.txitxirio-loop-swatches {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin: 10px 0 15px;
}
.txitxirio-loop-swatch {
display: inline-block;
width: 22px;
height: 22px;
border-radius: 50%;
border: 1px solid rgba(0,0,0,0.15);
}


/* Txitxirio: colores redondos solo en ficha de producto (Kolorea), tallas sin cambios */
.single-product [data-attribute_name="attribute_pa_kolorea"] .variable-item,
.single-product [data-attribute_name="attribute_pa_kolorea"] .variable-item-contents,
.single-product [data-attribute_name="attribute_pa_kolorea"] .variable-item-span-color {
border-radius: 50% !important;
}
.single-product [data-attribute_name="attribute_pa_kolorea"] .variable-item {
width: 38px !important;
height: 38px !important;
}
.single-product [data-attribute_name="attribute_pa_kolorea"] .variable-item-contents {
width: 34px !important;
height: 34px !important;
}


/* Txitxirio: tipografia manuscrita para la descripcion de categoria (estilo de los disenos) */
.tax-product_cat .page-header-title {
font-size: 18px !important;
color: #888 !important;
letter-spacing: 1px;
}
.term-description p {
font-family: 'Architects Daughter', cursive;
font-size: 36px;
line-height: 1.3;
color: #333;
text-align: center;
margin: 4px 0 10px !important;
}
.fuente-corporativa{
	font-family:'Architects Daughter';
}

/* Txitxirio: mas espacio entre productos en la portada (home), igualando el grid de categorias */
.page-id-2497 ul.products li.product {
padding-left: 12px !important;
padding-right: 12px !important;
}


/* Txitxirio: borde tipo "dibujado a mano" en el bloque hero de la home, al
   estilo del garabato del logo (circulo irregular tras "txitxirio"), 2026-09-02 */
.elementor-element-2d52191.e-con {
border: 5px solid #1a1a1a !important;
border-radius: 82px 56px 72px 46px / 54px 78px 44px 88px !important;
position: relative;
transform: rotate(-0.6deg);
}
.elementor-element-2d52191.e-con::before {
content: "";
position: absolute;
top: -3px; left: -11px; width: calc(100% + 6px); height: calc(100% + 16px);
border: 5px solid #1a1a1a;
border-radius: 58px 82px 50px 72px / 78px 44px 88px 50px;
opacity: 0.5;
pointer-events: none;
transform: rotate(0.8deg);
}
.elementor-element-2d52191.e-con::after {
content: "";
position: absolute;
bottom: -56px;
left: 45%;
width: 46px;
height: 64px;
background:
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 64'%3E%3Cpath d='M4 4 C 11 20, 14 28, 19 50 C 26 34, 30 24, 34 8' stroke='%231a1a1a' stroke-width='4.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7 16 C 13 30, 16 38, 20 58 C 28 42, 33 32, 42 22' stroke='%231a1a1a' stroke-width='3.5' fill='none' stroke-linecap='round' stroke-linejoin='round' opacity='0.55'/%3E%3C/svg%3E") no-repeat center/contain,
linear-gradient(#fff9f1, #fff9f1) no-repeat top center / 30px 18px;
transform: translateX(-50%) rotate(-3deg);
pointer-events: none;
}


.txi-sketch-box {
border: 5px solid #1a1a1a !important;
border-radius: 82px 56px 72px 46px / 54px 78px 44px 88px !important;
position: relative;
transform: rotate(-0.5deg);
}
.txi-sketch-box::before {
content: "";
position: absolute;
top: -3px; left: -11px; width: calc(100% + 6px); height: calc(100% + 16px);
border: 5px solid #1a1a1a;
border-radius: 58px 82px 50px 72px / 78px 44px 88px 50px;
opacity: 0.5;
pointer-events: none;
transform: rotate(0.7deg);
}
.txi-sketch-box::after {
content: "";
position: absolute;
bottom: -56px;
left: 45%;
width: 46px;
height: 64px;
background:
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 64'%3E%3Cpath d='M4 4 C 11 20, 14 28, 19 50 C 26 34, 30 24, 34 8' stroke='%231a1a1a' stroke-width='4.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7 16 C 13 30, 16 38, 20 58 C 28 42, 33 32, 42 22' stroke='%231a1a1a' stroke-width='3.5' fill='none' stroke-linecap='round' stroke-linejoin='round' opacity='0.55'/%3E%3C/svg%3E") no-repeat center/contain,
linear-gradient(#fff9f1, #fff9f1) no-repeat top center / 30px 18px;
transform: translateX(-50%) rotate(-3deg);
pointer-events: none;
}
.my-btn{
	width: 100%!important;
}