/*
Theme Name: Twenty Twenty-Five HIJO222
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Template: twentytwentyfive
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Five emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Tags: one-column,custom-colors,custom-menu,custom-logo,editor-style,featured-images,full-site-editing,block-patterns,rtl-language-support,sticky-post,threaded-comments,translation-ready,wide-blocks,block-styles,style-variations,accessibility-ready,blog,portfolio,news
Version: 1.3.1763485100
Updated: 2025-11-18 11:58:20

*/
.wp-block-navigation__submenu-container .wp-block-navigation-submenu {
	padding: 0 15px;
}

.wp-block-navigation__responsive-container-close {
	margin: 10px;
}

.wc-block-components-drawer__screen-overlay--with-slide-in {
	z-index: 999999;
}

.wc-block-product-filters__overlay {
	z-index: 999996;
}
.wc-block-cart-item__wrap .wc-block-components-product-metadata {
	display: none;
}



.wp-block-navigation__responsive-container hidden-by-default has-modal-open is-menu-open {
	z-index: 999998;
}


.wc-block-components-product-image .wc-block-components-product-sale-badge--align-right {
	right: 4px;
	top: 7px;
}

.wc-block-components-product-sale-badge span {
	background-color: transparent;
}


/* Quitar borde azul / gris / highlight cuando haces clic o enfocas elementos */
*:focus,
*:focus-visible,
*:focus-within {
    outline: none !important;
    box-shadow: none !important;
}

.wc-block-product-template.wc-block-product-template {
	gap: 5px;
}


/* ----------- QUITAR BORDE DE FLECHAS - BANNER----------- */
.kb-splide .splide__arrow, .wp-block-kadence-advancedgallery .kb-gallery-pause-button { 
	border: none;
}


/* ----------- ESTILO AVISOS HEADER ----------- */
.zicks-aviso-container {
	font-family: "Bellota", system-ui;
	color: #DCC7AE; line-height: 0.5rem;
	font-size: 0.6rem;
	text-align: center;
	letter-spacing: 1px;
	transition: opacity 0.3s ease;
	padding: 8px 0 0 0;
	line-height: 0.1rem; 
}
#zicks-aviso-text {
	transition: opacity 0.3s ease;
}


/* CARRUSEL FLUIDEZ */
.is-product-collection-layout-carousel {
    cursor: grab;
    scroll-behavior: auto !important; /* evita conflictos */
}

.is-product-collection-layout-carousel.dragging {
    cursor: grabbing;
    user-select: none;
}



.wc-block-components-product-image img {
	aspect-ratio: 5 / 7;
}



/*--------------------------------------------------------------------------------------- MENÚ FRANJAE IZQUIERDA --------------------------------------------------------------------*/
/* Quitar fondo a los contenedores que cubren toda la pantalla */
.wp-block-navigation__responsive-container,
.wp-block-navigation__responsive-close {
    background: transparent !important;
}

/* Overlay que cubre la pantalla, con oscuro suave */
.wp-block-navigation__responsive-close {
    position: fixed !important;
    inset: 0;
    background: rgba(0, 0, 0, 0.35) !important; /* oscuridad suave */
    pointer-events: auto; /* detecta clics */
    z-index: 9998; /* debajo del panel */
}

/* Panel lateral (franja) arriba del overlay */
.wp-block-navigation__responsive-dialog {
    position: fixed !important;
    top: 0;
    bottom: 0;
    left: 0;
    width: 300px;
    max-width: 80vw;
    height: 100vh;
    background: #ffffff;
    transform: translateX(-100%);
    transition: transform 0.35s ease-in-out;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    pointer-events: auto;
    z-index: 9999; /* encima del overlay */
}

/* Cuando el menú está abierto (WordPress añade esta clase al body/contenedor) */
.has-modal-open .wp-block-navigation__responsive-dialog {
    transform: translateX(0);
}

/* Alinear los items a la izquierda dentro del panel */
.wp-block-navigation__responsive-container-content,
.wp-block-navigation__container {
    width: 100%;
    text-align: left !important;
}

.wp-block-navigation-item__content {
    justify-content: flex-start !important;
}

.wp-block-navigation__container a {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0;
}

/* Forzar que los items principales del menú lateral se alineen a la izquierda */
.wp-block-navigation__responsive-dialog .wp-block-navigation__container {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    text-align: left !important;
}

/* Asegurar que los botones/enlaces también se alineen */
.wp-block-navigation__responsive-dialog .wp-block-navigation-item__content,
.wp-block-navigation__responsive-dialog .wp-block-navigation-item__label {
    justify-content: flex-start !important;
    text-align: left !important;
}




/*----------------------------------------------------------------------------------------------
/* === HEADER STICKY (el segundo) === */
.header_sticky {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99999;
    background: #ffffff;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
/* sombra suave cuando está fijo */
.kb-header-fixed-shadow {
    box-shadow: 0 5px 15px rgba(0,0,0,0.06);
}

/* placeholder que evita el salto */
#zicks-header-placeholder {
    height: 0px;
}

/* El primer header con scroll-hide */
.header_aviso {
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.kb-header-hidden {
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
}

/* Aviso superior (primer header) */
.header_aviso {
    transition: transform 0.3s ease, opacity 0.3s ease;
    will-change: transform, opacity;
}

.header_aviso.kb-header-hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

/* Header principal FIJO (segundo header) */
.header_sticky {
    position: fixed !important;
    left: 0;
    right: 0;
    top: 0; /* lo ajustamos con JS */
    z-index: 99999;
    background: #ffffff;
    transition: top 0.25s ease, box-shadow 0.25s ease;
}

/* Sombra cuando hay scroll */
.kb-header-fixed-shadow {
    box-shadow: 0 5px 15px rgba(0,0,0,0.06);
}

/* Placeholder para que no salte el contenido */
#zicks-header-placeholder {
    height: 0;
}


/* MENU TABBBBBBBBBBBBBB ------------------------------------------------------------------*/
.zicks-product-tabs {
    font-family: "Bellota";
    color: rgba(18,18,18,0.75);
    margin: 20px 0;
}

.zicks-tabs-buttons {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
	flex-direction: row;
    margin-bottom: 13px;
	align-items: flex-end;
}

.zicks-tab-btn {
    font-family: "Bellota";
    background: none;
    border: none;
    padding: 10px 18px;
    font-size: 1rem;
    cursor: pointer;
    letter-spacing: 0.02rem;
    border-bottom: 2px solid transparent;
    transition: 0.3s ease;
}

.zicks-tab-btn.active {
    border-color: #000;
}

.zicks-tab-content {
    display: none;
    font-size: 1rem;
    line-height: 1.6;
	padding: 0 12px;
}

.zicks-tab-content.visible {
    display: block;
}

.hidden {
    display: none;
}








/* ================================
   GALERÍA 2 COLUMNAS — SOLO TABLETS Y PC
   ================================ */
@media (min-width: 768px) {

    .wc-block-product-gallery-large-image__container {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        overflow: visible !important;
    }

    .wc-block-product-gallery-large-image__wrapper {
        min-width: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
    }

    /* Primera imagen → 2 columnas */
    .wc-block-product-gallery-large-image__wrapper:first-child {
        grid-column: 1 / span 2;
    }

    .wc-block-product-gallery-large-image__wrapper img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover;
    }

    /* Desactivar flechas del slider (solo tablets/PC) */
    .wc-block-next-previous-buttons {
        display: none !important;
    }

    /* Evitar overflow del contenedor del slider */
    .wc-block-product-gallery-large-image {
        overflow: visible !important;
    }
}
/* ================================
   OCULTAR MINIATURAS EN TABLET Y PC
   ================================ */
@media (min-width: 768px) {
    .wc-block-product-gallery-thumbnails {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}





/* 2 COLUMNAS EN CEL
 * /* ================================
   PRODUCT GRID — 2 COLUMNAS SOLO EN MÓVIL
   ================================ */
@media (max-width: 767px) {

    /* Forzar 2 columnas siempre en mobile */
    .wc-block-product-template__responsive {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* Quitar tamaños automáticos que pone WooCommerce en móvil */
    .wc-block-product-template__responsive.columns-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Por seguridad, forzamos que los li no estiren el ancho */
    .wc-block-product-template__responsive > li {
        width: 100% !important;
    }
}





/* BACKDROP */
.zsg-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    opacity: 0;
    visibility: hidden;
    transition: .3s ease;
}

.zsg-panel,
.zsg-overlay {
    z-index: 999999999 !important;
}

/* Centrado de los títulos de cada bloque de tabla */
#zsg-dynamic-content h3 {
    text-align: center;
    font-weight: 600;
    margin-bottom: 12px;
    margin-top: 10px;
}

.zsg-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* PANEL */
.zsg-panel {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    max-width: 620px;
    height: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    transition: right .35s cubic-bezier(.22,1,.36,1);
    box-shadow: -2px 0 10px rgba(0,0,0,0.15);
}
.zsg-panel.active {
    right: 0;
}

/* HEADER */
.zsg-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #ddd;
}
.zsg-header h2 {
    margin: 0;
    font-size: 1.2rem;
}
.zsg-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}

/* CONTENT */
.zsg-content {
    padding: 16px;
    overflow-y: auto;
    height: calc(100% - 60px);
}

/* TABLA */
.zsg-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.1rem;
}
.zsg-table th,
.zsg-table td {
    border: 1px solid #000;
    padding: 10px;
    text-align: center;
}
.zsg-label {
    text-align: left;
    background: #e6e6e6;
    font-weight: 600;
}

/* BUTTON */
/* Botón activador */
.zsg-btn {
	font-family: "Bellota";
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 8px 0;
    cursor: pointer;
    font-size: 1rem;
    letter-spacing: .3px;
}

/* Animación línea inferior — desde centro hacia afuera */
.zsg-btn::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -2px; /* espacio debajo del texto */
    width: 0;
    height: 1px;
    background-color: #000;
    transition: width .35s ease, left .35s ease;
}

.zsg-btn:hover::after {
    width: 100%;
    left: 0;
}

/* Icono alineado */
.zsg-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.zsg-btn-icon svg {
    width: 20px;
    height: 20px;
    pointer-events: none;
    stroke: #000;
}


/* MOBILE: pantalla completa */
@media (max-width: 600px) {
    .zsg-panel {
        max-width: 100%;
    }
}

.zsg-table-source {
    display: none;
}




















/* ----------- MARQUEE CECIL BASE ----------- */
.cecil-marquee {
  display: flex;
  overflow: hidden;
  position: relative;
  width: 100%;
  align-items: center;
}

.cecil-marquee__content {
  display: flex;
  flex-shrink: 0;
  white-space: nowrap;
  align-items: center;
}

.cecil-marquee-text {
  font-family: 'Bellota'; /* estilo suave bohemio */
  font-style: italic;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding-right: 5rem;
}

/* Dirección: derecha → izquierda */
@keyframes cecilMarqueeRTL {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* Dirección: izquierda → derecha */
@keyframes cecilMarqueeLTR {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(0); }
}












/* ===========================
   BANNER MÓVIL DESLIZABLE
   =========================== */
@media (max-width: 768px) {

  .cec-banner-mobile {
    width: 100%;
    overflow: hidden;
    position: relative;
    background: transparent;
    padding: 10px 0;
  }

  .cec-banner-track {
    display: flex;
    width: max-content;
    animation: cecBannerSlide 12s linear infinite;
  }

  .cec-banner-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    white-space: nowrap;
    border-bottom: 1.5px solid #000;
    margin-right: 40px;
  }

  .cec-banner-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
  }

  /* Animación suave derecha → izquierda */
  @keyframes cecBannerSlide {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }
}










/* MAPA RESPONSIVO */
.cec-static-map img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
    border-radius: 14px;
}

/* --- Ajuste especial solo para móviles --- */
@media (max-width: 768px) {

    .cec-static-map {
        max-width: 260px; /* 🔥 Ajusta aquí el tamaño deseado en móvil */
        margin: 0 auto;   /* Centrado */
    }

    .cec-static-map img {
        border-radius: 10px;
    }
}