/*
 Theme Name: Twenty Twenty-Four Child
 Theme URI: https://shop.elrincondeblacky.com/
 Description: Child theme de Twenty Twenty-Four
 Author: El Rincón de Blacky
 Template: twentytwentyfour
 Version: 1.0.0
*/

/* GENERAL */
  :where(.wp-site-blocks *:focus){outline-width:2px;outline-style:solid}

/* HEADER */
  .wp-block-navigation__container.wp-block-navigation a {
    color: #666!important;
    font-weight: 500!important; 
  }
  
  .wp-block-navigation__container.wp-block-navigation a:hover {
    color: #333!important;
  }
  
  .wp-block-navigation__container.wp-block-navigation .current-menu-item a span,
  .wp-block-navigation__container.wp-block-navigation .current-menu-ancestor > a span{
    font-weight: 600!important; 
    color: #000;!important
  }

/* PAGES */
.entry-content.no-margin-top.wp-block-post-content {
    margin-block-start: 0!important;
}

/* Botón Add to Cart junto a la cantidad */
.woocommerce div.product form.cart .single_add_to_cart_button {
  background-color: #8C1424;
  border-radius: 2px;
  border: 1px solid #8C1424;
}

/* Hover */
.woocommerce div.product form.cart .single_add_to_cart_button:hover {
  background-color: #FFF;
  color:#000;
  border-radius: 2px;
  border: 1px solid #000;
}

/* HIDE CREDIT */
#turnkey-credit  {
    display: none !important;
}

/* PAGE WIDTH */
:root {
    --wp--style--global--content-size: 1420px;
    --wp--style--global--wide-size: 1420px;
    --list-bullet-color: rgb(41 54 61 / 1);
    --wp--block-max-width: 950px;
}

ul li::marker {
    color:#d1d9e0
}

footer.wp-block-template-part a {
    font-weight: 200;
}

/* Contenedor del formulario */
.wp-block-contact-form-7-contact-form-selector .wpcf7-form {
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem;
    font-family: 'Inter', sans-serif;
}

/* Labels */
.wp-block-contact-form-7-contact-form-selector label {
    font-family: var(--wp--preset--font-family--barlow) !important;
    display: block;
    font-weight: 200;
    margin-bottom: 0.25rem;
    color: #333;
}

/* Inputs y textarea */
.wp-block-contact-form-7-contact-form-selector input[type="text"],
.wp-block-contact-form-7-contact-form-selector input[type="email"],
.wp-block-contact-form-7-contact-form-selector input[type="tel"],
.wp-block-contact-form-7-contact-form-selector textarea,
.wp-block-contact-form-7-contact-form-selector input.wpcf7-quiz {
    width: 100%;
    padding: 0.75rem 1rem;
    margin-bottom: .5rem;
    border: 1px solid #d1d9e0;
    border-radius: 2px;
    font-size: 0.95rem;
    color: #333;
    background-color: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* Focus suave */
.wp-block-contact-form-7-contact-form-selector input:focus,
.wp-block-contact-form-7-contact-form-selector textarea:focus,
.wp-block-contact-form-7-contact-form-selector input.wpcf7-quiz:focus {
    outline: none;
    border-color: #000;
}

/* Botón enviar */
.wp-block-contact-form-7-contact-form-selector input.wpcf7-submit {
    display: block;
    background-color: #8C1424;
    border-radius: 2px;
    border: 1px solid #8C1424;
    color: #FFF;
    font-weight: 600;
    padding: 0.75rem 4rem;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 1rem;
}

/* Hover botón */
.wp-block-contact-form-7-contact-form-selector input.wpcf7-submit:hover {
    background-color: #FFF;
    border-radius: 2px;
    border: 1px solid #000;
    color:#000;
}

/* Mensaje de error / éxito */
.wpcf7-response-output {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 6px;
    font-size: 0.95rem;
}

/* Mensaje de error */
.wpcf7-mail-sent-ng {
    background-color: #fdd;
    color: #900;
    border: 1px solid #f99;
}

/* Mensaje de éxito */
.wpcf7-mail-sent-ok {
    background-color: #e6f4ea;
    color: #2d662d;
    border: 1px solid #8bc78b;
}

/* Ocultar honeypot de manera elegante */
.wp-block-contact-form-7-contact-form-selector .apiosys-hp-field,
.wp-block-contact-form-7-contact-form-selector .apiosys-hp-checkbox {
    display: none !important;
}


/* PRODUCT */
a.product-brand {
    --tw-text-opacity: 1;
    color: rgb(92 122 137 / var(--tw-text-opacity));
    line-height: 1rem;
    font-size: 1rem;
    font-weight: 400;
    font-family: var(--wp--preset--font-family--barlow);
    letter-spacing: .1rem;
    text-transform: uppercase;
    text-decoration: none;
}

a.product-brand:hover {
    color: #8C1424;
    line-height: 1rem;
}

body.single-product .product-excerpt {
    font-size: .9rem;
}

body.single-product .wp-block-post-title {
    margin-top:0;
}


body.single-product .variations,
body.single-product .variations tbody,
body.single-product .variations tr,
body.single-product .variations th,
body.single-product .variations td {
    display: block;
    width:100%
}

body.single-product .variations th.label {
    padding:0;
}

.producto-caracteristicas ul {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0 0;
}

.producto-caracteristicas li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 8px;
    font-size: var(--wp--preset--font-size--small) !important;
}

.producto-caracteristicas li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 22px;

    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;

    background-image: url("data:image/svg+xml,%3Csvg fill='none' viewBox='0 0 18 22' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cpath stroke='%2329363D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M16.5 12.3143V13.0043C16.4991 14.6216 15.9754 16.1953 15.007 17.4907C14.0386 18.786 12.6775 19.7337 11.1265 20.1922C9.57557 20.6508 7.91794 20.5957 6.40085 20.0352C4.88376 19.4747 3.58849 18.4389 2.70822 17.0821C1.82795 15.7253 1.40984 14.1203 1.51626 12.5065C1.62267 10.8927 2.24791 9.35654 3.29871 8.1271C4.34951 6.89766 5.76959 6.04083 7.34714 5.6844C8.92469 5.32798 10.5752 5.49105 12.0525 6.14929M16.5 7L9 14.5075L6.75 12.2575'/%3E%3C/g%3E%3C/svg%3E");
}


a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.wp-element-button:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
    border:none;
}

.woocommerce-variation.single_variation {
  display: none !important;
}

.woocommerce-variation.single_variation .woocommerce-variation-price {
  display: none !important;
}

.short-title {
  font-style: normal;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
  font-size: 1.25rem;
  margin: 0;
}

.short-title-link {
  text-decoration: none;
  color: inherit; /* hereda el color del título */
}

.short-title-link:hover {
  text-decoration: none;
  color:#8C1424;
}

.wc-block-components-product-price.wc-block-grid__product-price {
  text-align: left
}

.wp-block-button__link.wp-element-button.add_to_cart_button {
  justify-content: left;
  text-align: center;
  width: 100%;
}


.wp-block-woocommerce-product-template .wc-block-product a[rel="tag"] {
    text-decoration: none;
}

.wp-block-woocommerce-product-template .wc-block-product a[rel="tag"]:hover {
    text-decoration: none;
}


.wp-block-navigation-item.whatsapp.wp-block-navigation-link a.wp-block-navigation-item__content {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: .5rem 1rem;
  border:1px solid #000;
  transition: all ease .3s;
}

.wp-block-navigation-item.whatsapp.wp-block-navigation-link a.wp-block-navigation-item__content:hover {
  background: #000;
  color:#FFF!important;
  text-decoration: none;
  transition: all ease .3s;
}



.wp-block-navigation-item.whatsapp.wp-block-navigation-link a.wp-block-navigation-item__content  .wp-block-navigation-item__label {
  display: inline-flex;
  align-items: center;
}

/* Insertar el SVG como fondo del pseudo-elemento */
.wp-block-navigation-item.whatsapp.wp-block-navigation-link a.wp-block-navigation-item__content span.wp-block-navigation-item__label::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right:10px;
  background: url('data:image/svg+xml;utf8,<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="b" x1="8" x2="8" y1="15.671" y2="0.276" gradientUnits="userSpaceOnUse"><stop stop-color="%231FAF38"/><stop offset="1" stop-color="%2360D669"/></linearGradient><clipPath id="a"><path fill="%23fff" d="M0 0h16v16H0z"/></clipPath></defs><g clip-path="url(%23a)"><path fill="url(%23b)" d="M.343 7.904c0 1.345.354 2.657 1.027 3.814L.28 15.671l4.075-1.06a7.73 7.73 0 0 0 3.674.928h.003c4.238 0 7.687-3.422 7.689-7.629a7.552 7.552 0 0 0-2.25-5.397A7.67 7.67 0 0 0 8.032.276C3.794.276.345 3.698.343 7.904"/><path fill="%23fff" d="M6.043 4.598c-.15-.329-.306-.335-.448-.341-.116-.005-.249-.005-.381-.005a.734.734 0 0 0-.53.248c-.183.197-.697.675-.697 1.647 0 .971.713 1.91.812 2.043.1.131 1.377 2.19 3.4 2.98 1.68.659 2.023.528 2.388.495.364-.033 1.177-.478 1.343-.939.166-.461.166-.856.116-.939-.05-.082-.182-.132-.381-.23-.2-.1-1.178-.577-1.36-.643-.183-.066-.315-.099-.448.099-.133.197-.514.642-.63.774-.116.132-.232.148-.431.05-.2-.1-.84-.308-1.6-.98a5.956 5.956 0 0 1-1.108-1.368c-.116-.198-.012-.305.088-.403.089-.089.199-.23.298-.346.1-.116.133-.198.199-.33.066-.131.033-.247-.017-.346-.05-.098-.436-1.075-.613-1.466Z"/></g></svg>') no-repeat center;
  background-size: contain;
}

.producto-disclaimer-legal {
  color: #a4a4a4;
  font-size:.8rem;
}

/* SLIDER */
.metaslider.ms-theme-bitono .flexslider .caption-wrap {
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.5))!important
}

.metaslider.ms-theme-bitono .flexslider .caption-wrap .caption {
  color: white; 
  font-family: var(--wp--preset--font-family--barlow) !important;
  font-style:normal;
  font-weight:700;
  font-size:clamp(1.1rem, 1.1rem + ((.5vw - 0.1rem) * 1.5), 1.2rem);
  line-height:1.5rem;
}

.metaslider.ms-theme-bitono .flexslider .caption-wrap .caption h1,
.metaslider.ms-theme-bitono .flexslider .caption-wrap .caption h2,
.metaslider.ms-theme-bitono .flexslider .caption-wrap .caption h3,
.metaslider.ms-theme-bitono .flexslider .caption-wrap .caption h4,
.metaslider.ms-theme-bitono .flexslider .caption-wrap .caption h5,
.metaslider.ms-theme-bitono .flexslider .caption-wrap .caption h6 {
    font-family: var(--wp--preset--font-family--fira-sans) !important;
    color: white;
    font-size:clamp(2.2rem, 2.2rem + ((1vw - 0.2rem) * 3), 4rem);
    font-style:normal;
    font-weight:500
}

.metaslider.ms-theme-bitono .flexslider .flex-direction-nav a {
  background-color: #8c1424!important;
}

.metaslider.ms-theme-bitono .flexslider .flex-control-nav li a {
    box-shadow: none !important;
    background: #8c1424!important;
    margin: 0 5px;
    border-radius: 0px!important;
    opacity: 0.8;
}

.metaslider.ms-theme-bitono .flexslider .flex-control-nav li a.flex-active {
  background: white!important;
}

.metaslider.ms-theme-bitono .flexslider .caption-wrap .caption {
  width: 50vw;
  min-width: 450px;
  max-width:var(--wp--block-max-width)!important;
  top: 50%;
  left:50%!important;
  transform: translate(-50%, -50%)!important;
}

#metaslider-id-5085 .flexslider .caption-wrap a {
    color: var(--wp--preset--color--base)!important;
    background-color: #8c1424;
}

.metaslider.ms-theme-bitono .flexslider .caption-wrap a.wp-block-button__link.has-background.wp-element-button {
    border-radius: .33rem;
    border-color: var(--wp--preset--color--contrast);
    border-width: 0;
    color: var(--wp--preset--color--base);
    font-family: var(--wp--preset--font-family--barlow);
    font-size: var(--wp--preset--font-size--small);
    font-style: normal;
    font-weight: 600;
    letter-spacing: inherit;
    line-height: inherit;
    padding-top: 0.6rem;
    padding-right: 1rem;
    padding-bottom: 0.6rem;
    padding-left: 1rem;
    text-decoration: none;
    text-transform: inherit;
}

/*.metaslider.ms-theme-bitono .flexslider .caption-wrap .caption {
    padding: 20px 70px;
    text-align: center;
    top: 50%;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    z-index: 2;
}*/

/* BRAND THUMB */
.brand-thumbnail {
  width:150px;
  height:150px;
  border-radius:50%;
  object-fit:cover;
}

/* UNIVERSOS */
.directorio-universo-container {
    column-count: 3;
    column-gap: 80px;
    padding: 20px 0;
    min-height:40vh;
}
.grupo-alfabetico {
    break-inside: avoid;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
}
.letra-cabecera {
    font-family: var(--wp--preset--font-family--fira-sans) !important;
    color: #8B2323;
    font-weight:500
    font-size: 1.5rem;
    margin-bottom: 5px;
    border-bottom: 1px solid var(--wp--preset--color--accent-5);
    margin-bottom: 10px;
    //font-size:clamp(2.2rem, 2.2rem + ((1vw - 0.2rem) * 3), 4rem);
    font-style:normal;
}

.enlace-universo {
    text-decoration: none;
    padding: 3px 0;
    color: inherit;
    margin-left: 10px;
}

/* Estilo para el contador de productos */
.term-count {
    display: inline-block;
    font-size: 0.75rem;
    color: var(--wp--preset--color--accent-5);
    background-color: #f2f2f2;
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: 8px;
    font-weight: 500;
    vertical-align: middle;
    line-height: 1;
}

/* Efecto al pasar el ratón por el enlace padre */
.enlace-universo:hover .term-count {
    background-color: #8B2323;
    color: #ffffff;
    transition: all 0.3s ease;
}

.enlace-universo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    text-decoration: none;
    color: #333;
    margin-left: 0px;
}

.term-count {
    font-size: 0.75rem;
    color: #999;
    border: 1px solid #eee;
    padding: 1px 6px;
    border-radius: 4px;
    min-width: 20px;
    text-align: center;
}

ul.universo-grid .universo-item {
  margin-bottom:20px;
}

ul.universo-grid .universo-item .universo-img-container img {
    height: 350px !important;
    margin-bottom:20px;
}

ul.universo-grid .universo-item .universo-brand a {
  color: #5c7a89;
  text-decoration:none;
  font-family: var(--wp--preset--font-family--barlow);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.6px;
}

ul.universo-grid .universo-item .universo-brand a:hover {
  color: #8c1424;
}

ul.universo-grid .universo-item .value {
  color: var(--wp--preset--color--contrast);
  font-family: var(--wp--preset--font-family--barlow);
  font-size: var(--wp--preset--font-size--small);
  font-style: normal;
  font-weight: 400;
  line-height: 1.55;
  margin-top:0;
  padding-top:0;
  --wp--style--root--padding-right: var(--wp--preset--spacing--50);
  --wp--style--root--padding-left: var(--wp--preset--spacing--50);
}

ul.universo-grid .universo-item .price {
    font-size: var(--wp--preset--font-size--medium) !important;
}


/* Contenedor general */
.buscador-universos-container {
    width: 100%;
    margin-bottom: 25px;
    font-family: inherit;
}

/* Etiqueta "Buscar" superior */
.buscador-label {
    display: block;
    font-size: 14px;
    color: #333;
    margin-bottom: 8px;
}

/* Grupo del input y botón */
.buscador-input-group {
    display: flex;
    position: relative;
    width: 100%;
}

/* Caja de texto */
#inputBuscador {
    flex-grow: 1;
    height: 42px; /* Altura estándar de tu tienda */
    padding: 0 15px;
    border: 1px solid #d1d1d1; /* Gris suave de la captura */
    border-radius: 2px; /* Esquinas casi rectas */
    font-size: 14px;
    color: #666;
    outline: none;
    box-sizing: border-box;
}

#inputBuscador::placeholder {
    color: #b1b1b1;
}

/* Botón Negro con Lupa */
.buscador-boton {
    width: 45px;
    height: 42px;
    background-color: #000; /* Negro sólido de la tienda */
    color: #fff;
    border: none;
    border-radius: 0 2px 2px 0; /* Redondeado solo en la derecha */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-left: -1px; /* Para que solape con el borde del input */
}

.buscador-boton svg {
    stroke: #fff;
}

.buscador-boton:hover {
    background-color: #8B2323; /* Cambio al granate corporativo al pasar el ratón */
    transition: background 0.3s ease;
}

@media (max-width: 768px) {
    .directorio-universo-container { 
      column-count: 1;
      min-height: auto; 
    }
} 

.wp-block-group.block-max-width {
  max-width:var(--wp--block-max-width)!important;
}

/* Cuando el ratón está sobre el contenedor, eliminamos el filtro de la imagen */
.patreon-logo:hover .wp-duotone-duotone-5.wp-block-image img {
    filter: none !important;
    transition: filter 0.3s ease; /* Opcional: para que el cambio de color sea suave */
}

.wp-duotone-duotone-5.wp-block-image img {
    filter: var(--wp--preset--duotone--duotone-5);
    transition: filter 0.4s ease-in-out !important;
    will-change: filter; /* Optimiza el rendimiento de la transición */
}

.patreon-logo:hover .wp-duotone-duotone-5.wp-block-image img {
    filter: grayscale(0%) brightness(100%) contrast(100%) !important;
}

.patreon-logo a:where(:not(.wp-element-button)) {
    color: var(--wp--preset--color--accent-5);
    text-decoration: none!important;
}

.disclaimer-img {
  background: rgba(255, 255, 255, .4);
  padding: 5px;
  max-width: calc(100% - 10px) !important;
  margin: 0 auto
}

.gtranslate {
  padding-left:10px;
  display: block;
}

.gtranslate .gt_switcher-popup span:first-of-type {
    display:none!important;
}

.card-icons-footer {
  padding:10px 0;  
}

.card-icons-wrapper {
  gap:.5rem;
}

.card-icons-footer .lock-ico {
  margin-top:-8px;
}

.card-icons-footer p {
  font-size: .75rem;
  margin-right: 14px;
}

/* MOBILE */
@media screen and (max-width: 767px) {
    /* Bloqueo absoluto del desbordamiento lateral (Evita el scroll horizontal) */
    html, body {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Refuerzo para el contenedor principal de los bloques de WordPress */
    .wp-site-blocks {
        overflow-x: hidden !important;
        width: 100% !important;
    }
    
    .hide-infobox-mobile,
    .universes-description {
        display: none !important;
    }
    
    .home-banner {
      margin-bottom: 40px!important;
    }
    
    body .is-layout-flex.results-count {
      display: none;
    }
    
    .disclaimer-img {
      max-width: 100% !important;
      margin: 0 auto
    }
    
    /* Reducir el espacio blanco en los laterales en móvil */
    .has-global-padding {
        padding-left: 10px !important;  
        padding-right: 10px !important; 
    }
    
    .black-contact.has-global-padding,
    .black-testimonial.has-global-padding {
      padding-right: 40px!important;
      padding-left: 40px!important;
    }
    
    /* Si quieres que las columnas de las categorías aprovechen aún más el ancho */
    .wp-block-columns.alignwide,
    .wp-block-group.alignwide {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* ==========================================
       CAMBIAR ICONO DE MENÚ (=) A HAMBURGUESA (≡)
       ========================================== */
    
    /* 1. Ocultamos el icono de dos líneas original de WordPress */
    .wp-block-navigation__responsive-container-open svg {
        display: none !important;
    }
    
    /* 2. Convertimos el botón en un contenedor flexible para centrar nuestra hamburguesa */
    .wp-block-navigation__responsive-container-open {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        width: 40px !important;  
        height: 40px !important;
        padding: 0 !important;
    }
    
    /* 3. Creamos la línea central de la hamburguesa clásica mediante un pseudoelemento del botón */
    .wp-block-navigation__responsive-container-open::before {
        content: "" !important;
        background: currentColor !important;
        width: 22px !important;
        height: 2px !important;
        position: absolute !important;
        box-shadow: 0 -7px 0 0 currentColor, 0 7px 0 0 currentColor !important;
    }
    
    /* ==========================================
       OPTIMIZACIÓN DEL HEADER EN MÓVIL
       ========================================== */
    
    /* 1. Reducir el tamaño del logotipo */
    .wp-block-site-logo img,
    .navbar-brand img,
    header img {
        max-width: 65px !important; 
        height: auto !important;
    }
    
    .wp-block-site-logo img.custom-logo {
        max-width: 55px !important;
        height: auto !important;
    }
    
    /* 2. Quitamos el exceso de padding del contenedor principal */
    .wp-block-group.alignwide.has-background {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
    
    /* 3. Reducimos el espacio entre los bloques internos en móvil */
    .wp-block-group.is-layout-flex {
        gap: 10px !important;
    }

    /* 4. ARREGLO HEADER: Separación para el logo y los iconos respecto a los bordes de la pantalla */
    .wp-block-group.alignwide.is-content-justification-space-between {
        padding-left: 15px !important;  
        padding-right: 15px !important; 
        padding-top: 8px !important;    
        padding-bottom: 8px !important; 
    }
    
    /* ==========================================
       METASLIDER
       ========================================== */
    .metaslider, 
    .metaslider .slides, 
    .metaslider .slides li {
        height: 300px !important;
    }
    
    /* Ajuste de tamaño para el título del slider en dispositivos móviles */
    .caption-wrap .caption h1 {
        font-size: 1.2rem !important; 
        line-height: 1.1 !important;  
        margin-bottom: 15px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        text-align: center !important;
    }
    
    /* Pequeño ajuste por si el contenedor del botón también queda muy pegado */
    .caption-wrap .caption .wp-block-button__link {
        padding: 8px 16px !important;
        font-size: 0.9rem !important;
    }
    
    /* 2. Evitamos que la imagen se estire feo o se deforme */
    .metaslider .slides li img {
        height: 100% !important;
        object-fit: cover !important; 
        object-position: center !important; 
    }

    /* 3. Centramos, acomodamos y limitamos el ancho de la caja de textos al 80% */
    .metaslider .caption-wrap {
        height: 100% !important;
        display: flex !important;
        align-items: center !important; 
        justify-content: center !important;
        background: rgba(0, 0, 0, 0.4) !important; 
    }
    
    .metaslider .caption,
    .metaslider .caption-wrap .caption,
    .metaslider .caption * {
        max-width: 80% !important;   
        margin-left: auto !important;  
        margin-right: auto !important; 
        text-align: center !important;
    }

    /* 4. Retoque final a los títulos (tanto h1 como h2) en las diapositivas */
    .metaslider .caption h1,
    .metaslider .caption h2 {
        font-size: 1.4rem !important;
        line-height: 1.3 !important;
        margin-bottom: 15px !important;
        color: #ffffff !important;
    }

    /* 5. Ocultar flechas de navegación y puntitos de paginación en móvil */
    .metaslider .flex-direction-nav,
    .metaslider .flex-control-nav {
        display: none !important;
    }

    /* ==========================================
       REDISEÑO VISUAL DEL MENÚ MODAL (MÓVIL)
       ========================================== */

    /* 1. Forzamos la alineación de las variables de bloque a la izquierda */
    .wp-block-navigation.items-justified-right,
    .wp-block-navigation__responsive-container.is-menu-open {
        --navigation-layout-justification-setting: flex-start !important;
        --navigation-layout-justify: flex-start !important;
    }

    /* 2. Reducimos el padding superior para eliminar el espacio vacío de arriba */
    .wp-block-navigation__responsive-container.is-menu-open {
        padding: 25px 25px 40px 25px !important; 
    }

    /* 3. Forzamos la lista a estructurarse en una columna izquierda limpia sin márgenes colados */
    .wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container {
        text-align: left !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 12px !important; 
        margin-top: 0 !important; 
        padding-top: 0 !important;
    }

    /* 4. Estilo para los enlaces Padre (Tienda, Universos, Figuras de Resina, Arte de Pared, Marcas...) */
    .wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container > li > .wp-block-navigation-item__content {
        font-weight: 700 !important; 
        font-size: 1.1rem !important;
        color: #111111 !important;
        text-transform: uppercase !important; 
        letter-spacing: 0.5px !important;
        padding-bottom: 2px !important;
    }

    /* 5. El contenedor de los submenús (Línea vertical del árbol) */
    .wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__submenu-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important; 
        padding-left: 15px !important; 
        margin-top: 8px !important;
        margin-bottom: 15px !important;
        border-left: 2px solid #e5e5e5 !important; 
    }

    /* 6. Estilo para los enlaces Hijo + Posicionamiento relativo para la pestaña */
    .wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__submenu-container .wp-block-navigation-item {
        position: relative !important;
        width: 100% !important;
    }

    .wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
        font-weight: 400 !important; 
        font-size: 0.95rem !important;
        color: #555555 !important; 
        padding: 2px 0 2px 18px !important; 
        text-align: left !important;
    }

    /* 7. EFECTO CARPETA: Línea horizontal que conecta con la guía vertical */
    .wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__submenu-container .wp-block-navigation-item::before {
        content: "" !important;
        position: absolute !important;
        top: 50% !important;
        left: -15px !important; 
        width: 15px !important;  
        height: 2px !important;   
        background-color: #e5e5e5 !important; 
        transform: translateY(-50%) !important;
    }

    /* ==========================================
       PRODUCTOS EN UNA SOLA COLUMNA (.block-products)
       ========================================== */
    
    .block-products ul.wp-block-woocommerce-product-template,
    .block-products ul.wc-block-product-template {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important; 
        width: 100% !important;
        gap: 30px !important; 
    }

    .block-products ul.wp-block-woocommerce-product-template li,
    .block-products ul.wc-block-product-template li {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* ==========================================
       LOGOS DE MARCAS A 2 COLUMNAS (.logo_wrapper)
       ========================================== */
    
    .logo_wrapper.is-layout-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 15px !important; 
    }

    /* ==========================================
       FIX DUOTONO Y TEXTO BLANCO EN MARCAS
       ========================================== */

    .logo_wrapper .wp-block-image img,
    .logo_wrapper img {
        filter: none !important;
        -webkit-filter: none !important;
    }

    .logo_wrapper p.has-text-align-center,
    .logo_wrapper p {
        color: #ffffff !important;
    }
    
    .patreon-logo a:where(:not(.wp-element-button)) {
        color: #ffffff !important;
    }

    /* ==========================================
       FIX DEFINITIVO: ORDEN EN FILAS DE MARCAS
       ========================================== */

    /* Forzamos el contenedor de las columnas de la marca a actuar como Flexbox vertical */
    .block-brand-desc > .wp-block-columns {
        display: flex !important;
        flex-direction: column !important; 
        width: 100% !important;
    }

    /* Forzamos el ancho completo de las dos secciones de marca */
    .block-brand-desc > .wp-block-columns > .brand-desc,
    .block-brand-desc > .wp-block-columns > .brand-models {
        flex-basis: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Forzamos a la descripción a ir en segundo lugar */
    .block-brand-desc > .wp-block-columns > .brand-desc {
        order: 2 !important;
        margin-bottom: 50px !important;
    }

    /* Forzamos al catálogo de modelos a posicionarse arriba */
    .block-brand-desc > .wp-block-columns > .brand-models {
        order: 1 !important;
        margin-bottom: 25px !important;
    }

    /* ==========================================
       CENTRADO DE LOGO Y TÍTULO DE MARCA DEBAJO
       ========================================== */

    .wp-block-column .wp-block-group.is-nowrap.is-layout-flex {
        display: flex !important;
        flex-direction: column !important; 
        align-items: center !important;    
        justify-content: center !important;
        text-align: center !important;
        gap: 12px !important;              
    }

    .brand-title.wp-block-query-title {
        margin-left: 0 !important;
        margin-top: 0 !important;
        text-align: center !important;
        width: 100% !important;
    }

    .wp-block-group.is-nowrap.is-layout-flex p {
        margin: 0 !important;
        display: block !important;
    }
    
    /* ==========================================
       AVISO DE ACABADO FLOTANTE ABAJO DE LA IMAGEN
       ========================================== */
    
    /* Forzamos al bloque padre de la imagen a tener posición relativa para sujetar el cartel */
    .wc-block-product-gallery-large-image {
        position: relative !important;
        display: block !important;
        width: 100% !important;
    }
    
    /* Clavamos el cartel negro de aviso abajo del todo flotando sobre la fotografía */
    .wc-block-product-gallery-large-image__inner-blocks p.disclaimer-img,
    p.disclaimer-img.disclaimer-inyectado {
      
        position: absolute !important;
        bottom: 0 !important;
        top: auto !important; 
        z-index: 10 !important;
        box-sizing: border-box !important;
        margin: 0 auto;
    }
    
    /* ==========================================
     PRODUCT METAS
     ========================================== */
    .taxonomy-product_brand.wp-block-post-terms,
    .taxonomy-product_cat.wp-block-post-terms,
    .taxonomy-product_tag.wp-block-post-terms {
      display: none!important;
    }
    
    .wp-block-group.meta-block {
      padding-left:0!important;
    }
    
    body.single-product .wc-block-components-product-price.wc-block-grid__product-price {
      font-size:1.5rem!important;
      
    }
    
    /* ==========================================
       REJILLA DE UNIVERSOS A UNA SOLA COLUMNA (.universo-grid)
       ========================================== */
    
    ul.universo-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important; /* Fuerza una sola columna vertical */
        gap: 25px !important;             /* Separación limpia entre cada tarjeta de producto relacionado */
        width: 100% !important;
    }
    
    ul.universo-grid .universo-item .universo-img-container img {
        height: 350px !important;
    }
    
    /* ==========================================
       FIX SEGURO: CORTE DE PALABRAS EN LA TABLA
       ========================================== */
    
    /* Anulamos radicalmente el permiso del navegador para cortar palabras por la mitad en la tabla */
    .wc-block-product-description table td {
        word-break: normal !important;      /* Evita cortar palabras a machete */
        overflow-wrap: normal !important;
        white-space: normal !important;     /* Permite saltos de línea naturales por espacios */
    }
    
    /* Forzamos a la primera columna (los títulos) a ganar espacio fluido para que no se estruje */
    .wc-block-product-description table td:first-child {
        width: 35% !important;              /* Le subimos el ancho del 25% al 35% para que quepa "Personaje" entero */
        max-width: 35% !important;
    }
    
    /* Ajustamos proporcionalmente la segunda columna con los textos largos */
    .wc-block-product-description table td:last-child {
        width: 65% !important;
        max-width: 65% !important;
    }
    
    .block-products .taxonomy-product_brand {
      display:block!important;
    }
}