/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

html, body{
	overflow-x: hidden;
}


/* Mover el widget interno real del carrito hacia la izquierda */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle.elementor-button-wrapper {
    margin-left: -22px !important;
    margin-top: -4px !important;
}







/* === Paginación vertical a la derecha para el slider del home === */
/* === Paginación vertical abajo a la derecha === */

/* 1. Hacemos que el slider sea el contenedor de referencia */
/*.sl-pag-r .elementor-slides-wrapper {
    position: relative !important;
}*/

/* 2. Posicionamos la paginación */
/*.sl-pag-r .swiper-pagination {
    position: absolute !important;
    right: 100px !important;   */   /* Ajusta según diseño */
  /*  bottom: 40px !important;  */   /* Distancia desde abajo */
  /*  top: auto !important;  */      /* Anula el top */
  /*  left: auto !important; */      /* Evita que quede pegado a la izquierda */
  /*  transform: none !important; */ /* Anula el translate */
  /*  display: flex !important;*/
  /*  flex-direction: column !important;*/ /* Vertical */
  /*  gap: 12px !important;       */      /* Espacio entre bullets */
  /*  width: auto !important;
    height: auto !important;
}*/

/* 3. Estilos de bullets */
/*.sl-pag-r .swiper-pagination-bullet {
    width: 10px !important;
    height: 10px !important;
    background: #000 !important;
    opacity: 0.4 !important;
}

.sl-pag-r .swiper-pagination-bullet-active {
    background: #000 !important;
    opacity: 1 !important;
}
*/




/* FLECHAS EN BOTONES DENTRO DE SLIDER PRINCIPAL DE HOME */
/* ================================
   CITOCOL - Flecha completa (palito + punta)
   ================================ */

.citocol-slider-arrows .elementor-slide-button,
.citocol-slider-arrows .elementor-button{
  position: relative;
  padding-right: 55px; /* espacio para flecha completa */
}

/* PALITO */
.citocol-slider-arrows .elementor-slide-button::after,
.citocol-slider-arrows .elementor-button::after{
  content: "";
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 2px;
  background-color: currentColor;
  pointer-events: none;
}

/* PUNTA */
.citocol-slider-arrows .elementor-slide-button::before,
.citocol-slider-arrows .elementor-button::before{
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
  width: 8px;
  height: 8px;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  pointer-events: none;
}



/* CAMBIO DE PAGINACIÓN SLIDER PRINCIPAL HOME AHORA CON FLECHAS ESQUINA DERECHA INFERIOR */
/* =========================================
   CITOCOL - Slides: Flechas referencia + separador alineado + flechas completas (palito)
   Widget class: citocol-slider-arrows
   ========================================= */

.citocol-slider-arrows .elementor-slides-wrapper{ position: relative; }

/* Variables (ajsutes aquí) */
.citocol-slider-arrows{
  --nav-size: 30px;
  --nav-stroke: 2px;
  --nav-bottom: 34px;
  --nav-right: 96px;
  --nav-gap: 12px;
  
    /* ⬇️ COLORES */
  --nav-border: #444E7E !important;
  --nav-color:  #444E7E !important;
  --nav-sep:    #444E7E !important;


  --nav-sep-h: 22px;
  --nav-sep-nudge: 15px;   /* 👈 sube el separador */

  --nav-border: rgba(255,255,255,.75);
  --nav-color:  rgba(255,255,255,.95);
  --nav-sep:    rgba(255,255,255,.6);

  /* Flechas completas */
  --arrow-stroke: 2px;     /* grosor del palito y punta */
  --arrow-shaft: 12px;     /* largo del palito */
  --arrow-head: 7px;       /* tamaño de la punta */
}

/* Botones base */
.citocol-slider-arrows .elementor-swiper-button{
  top: auto !important;
  left: auto !important;
  bottom: var(--nav-bottom) !important;
  z-index: 30 !important;

  width: var(--nav-size) !important;
  height: var(--nav-size) !important;
  border-radius: 999px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: transparent !important;
  border: var(--nav-stroke) solid var(--nav-border) !important;
  color: var(--nav-color) !important;

  opacity: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  visibility: visible !important;
}

/* Posición derecha */
.citocol-slider-arrows .elementor-swiper-button-next{ right: var(--nav-right) !important; }
.citocol-slider-arrows .elementor-swiper-button-prev{
  right: calc(var(--nav-right) + var(--nav-size) + var(--nav-gap)) !important;
}

/* 1) Ocultar SVG original (chevrons) */
.citocol-slider-arrows .elementor-swiper-button svg{
  display: none !important;
}

/* 2) Dibujar flecha completa con CSS (palito + punta) */

/* Palito (shaft) - CENTRADO */
.citocol-slider-arrows .elementor-swiper-button::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--arrow-shaft);
  height: var(--arrow-stroke);
  background: currentColor;
  border-radius: 2px;
  pointer-events: none;
}

/* Punta (head) - CENTRADO */
.citocol-slider-arrows .elementor-swiper-button::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--arrow-head);
  height: var(--arrow-head);
  border-right: var(--arrow-stroke) solid currentColor;
  border-bottom: var(--arrow-stroke) solid currentColor;
  transform-origin: center;
  pointer-events: none;
}

/* Flecha derecha (next) */
.citocol-slider-arrows .elementor-swiper-button-next::before{
  transform: translate(-18%, -50%) rotate(-45deg);
}

/* Flecha izquierda (prev) */
.citocol-slider-arrows .elementor-swiper-button-prev::before{
  transform: translate(-70%, -50%) rotate(135deg);
}

/* Separador centrado ENTRE botones + ajuste vertical */
.citocol-slider-arrows .elementor-slides-wrapper::after{
  content: "";
  position: absolute;

  /* centra verticalmente respecto al círculo y luego nudgea */
  bottom: calc(
    var(--nav-bottom)
    + (var(--nav-size) - var(--nav-sep-h)) / 2
    + var(--nav-sep-nudge)
  );

  right: calc(var(--nav-right) + var(--nav-size) + (var(--nav-gap) / 2));
  width: 1px;
  height: var(--nav-sep-h);
  background: var(--nav-sep);
  pointer-events: none;
  z-index: 31;
}

/* Hover */
.citocol-slider-arrows .elementor-swiper-button:hover{
  border-color: rgba(255,255,255,.95) !important;
  color: rgba(255,255,255,1) !important;
}


/* Hover color principal */
.citocol-slider-arrows .elementor-swiper-button:hover{
  border-color: #6F82DA !important;
  color: #6F82DA !important;
}




/* DISEÑO DEL TÍTULO DE LA SALIDE PRINCIPAL */
/* =========================================
   Slide Home – subtítulo dentro del título
   ========================================= */

.elementor-widget-slides .elementor-slide-heading .slide-title-small{
  display: block;          /* baja a otra línea (CLAVE) */
  margin-top: 0.35em;      /* separación elegante */
  font-size: 0.4em;       /* no tan pequeño */
  font-weight: 600;        /* menos pesado que el título */
  letter-spacing: 0.08em; /* look más editorial */
  line-height: 1.2;
  opacity: 0.95;           /* suaviza sin perder color */
}








/* ANIMACIÓN DE BOTONES DEL HOME TIPO SALTO*/
/* =========================================
   CTA Contactanos – Bounce suave y elegante
   ========================================= */

@keyframes citocol-cta-bounce-soft {
  0%, 72%, 100% {
    transform: translate3d(0,0,0);
  }

  78% {
    transform: translate3d(0,-6px,0);
  }

  84% {
    transform: translate3d(0,0,0);
  }

  90% {
    transform: translate3d(0,-3px,0);
  }

  94% {
    transform: translate3d(0,0,0);
  }
}

/* TU botón */
.shake-element{
  animation: citocol-cta-bounce-soft 3.8s cubic-bezier(.22, .61, .36, 1) infinite;
  will-change: transform;
}

/* Pausa al hover */
.shake-element:hover{
  animation-play-state: paused;
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  .shake-element{
    animation: none;
  }
}


/* =========================================
   Home Slider – bounce SOLO en este widget
   (requiere clase .citocol-home-slider)
   ========================================= */

.citocol-home-slider .elementor-slide-button.elementor-button{
  animation: citocol-cta-bounce-soft 3.8s cubic-bezier(.22, .61, .36, 1) infinite;
  will-change: transform;
}

.citocol-home-slider .elementor-slide-button.elementor-button:hover{
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce){
  .citocol-home-slider .elementor-slide-button.elementor-button{
    animation: none;
  }
}






/* FORMULARIO SUSCRIBIRSE ANIMACIÓN DE LABELS Y ESTRUCTURA */

/* CONTENEDOR PRINCIPAL: CAMPOS EN FILA Y BOTÓN ABAJO */
.form-news form .elementor-form-fields-wrapper {
    display: flex !important;
    flex-wrap: wrap !important; /* Permite salto de línea */
    gap: 15px !important;
}

/* CAMPOS: NOMBRE, APELLIDO, EMAIL */
.form-news form .elementor-field-group:not(.elementor-field-type-submit) {
    flex: 1 1 calc(33.33% - 15px) !important; /* 3 columnas */
    min-width: 0 !important;
}

/* FORZAR QUE EL BOTÓN NO ENTRE EN LA MISMA FILA */
.form-news form .elementor-field-type-submit {
    flex: 0 0 100% !important; /* Botón ocupa fila completa */
    width: 100% !important;
    display: flex !important;
    justify-content: flex-end !important;
    margin-top: -15px !important;
}

.form-news .elementor-field:focus {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 2px solid #fff !important;
    box-shadow: none !important;
    outline: none !important;
}


/* RESPONSIVE FORMULARIO */
.form-responsive .elementor-field:focus {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 2px solid #fff !important;
    box-shadow: none !important;
    outline: none !important;
}



/* =========================================
   CITOCOL - Floating Label (Elementor Form)
   Clase widget: citocol-float
   Estructura: label + input dentro de .elementor-field-group
   ========================================= */

.citocol-float .elementor-field-group{
  position: relative;
}

/* Deja espacio arriba para el label cuando "sube" */
.citocol-float .elementor-field-textual{
  padding-top: 18px !important;
}

/* LABEL como placeholder (sobre el input) */
.citocol-float .elementor-field-group > .elementor-field-label{
  position: absolute;
  left: 12px;                 /* ajusta si tu input tiene padding diferente */
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  margin: 0 !important;
  opacity: .75;
  line-height: 1;
  transition: top .18s ease, transform .18s ease, opacity .18s ease, font-size .18s ease;
  z-index: 2;
}

/* Placeholder visible por defecto */
.citocol-float .elementor-field-textual::placeholder{
  opacity: 1;
  transition: opacity .15s ease;
}

/* Al enfocar o cuando hay texto: label sube */
.citocol-float .elementor-field-group.is-focus > .elementor-field-label,
.citocol-float .elementor-field-group.is-filled > .elementor-field-label{
  top: 3px;
  transform: translateY(0);
  opacity: 1;
  font-size: 14px;
}

/* Al enfocar o con texto: ocultar placeholder para que no choque */
.citocol-float .elementor-field-group.is-focus .elementor-field-textual::placeholder,
.citocol-float .elementor-field-group.is-filled .elementor-field-textual::placeholder{
  opacity: 0;
}


/* RESPONSIVE DE LOS LABELS FLOTANTES EN FORMULARIO DE FOOTER SUSCRIBETE */
/* =========================================
   CITOCOL - Floating Label (RESPONSIVE fine-tune)
   Solo móvil/tablet
   ========================================= */
@media (max-width: 767px){

  /* 1) Más espacio arriba para que el cursor/texto no quede pegado al label */
  .citocol-float .elementor-field-textual{
    padding-top: 24px !important;  /* 👈 sube/baja: 22–28 */
    padding-bottom: 10px !important; /* opcional: más “aire” */
  }

  /* 2) Transición más suave (menos brusca) */
  .citocol-float .elementor-field-group > .elementor-field-label{
    transition:
      top .28s cubic-bezier(.2,.8,.2,1),
      transform .28s cubic-bezier(.2,.8,.2,1),
      opacity .22s ease,
      font-size .28s cubic-bezier(.2,.8,.2,1);
  }

  /* 3) Cuando sube: que suba un poco más (más separación visual) */
  .citocol-float .elementor-field-group.is-focus > .elementor-field-label,
  .citocol-float .elementor-field-group.is-filled > .elementor-field-label{
    top: 3px;          /* 👈 más arriba (antes 7px). Prueba 2–5 */
    font-size: 14px;   /* 👈 el tamaño que ya te gustó (ajustable) */
  }

  /* 4) (Opcional) En reposo, bajar un poquito el label para que se sienta centrado */
  .citocol-float .elementor-field-group > .elementor-field-label{
    top: 54%;          /* 👈 50% era perfecto en desktop; en móvil a veces se ve mejor 52–56 */
  }
}






/* ALINEAR PRODUCTOS EN NUESTROS PRODUCTOS, DENTRO DE LAS PESTAÑAS */
/* === Alinear productos dentro del widget WooCommerce en pestañas === */

/* 1) Convertir cada producto en una tarjeta con alturas iguales */
.elementor-widget-woocommerce-products ul.products li.product {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    height: 100% !important;
    padding-bottom: 20px; /* espacio extra para el botón */
}

/* 2) Uniformar la altura de las imágenes */
.elementor-widget-woocommerce-products ul.products li.product a img {
    height: 240px !important;   /* <- AJUSTA ESTE VALOR */
    width: auto !important;
    object-fit: contain !important;
    display: block;
    margin: 0 auto 0px auto; /* centrado con espacio abajo */
}

/* 3) Alinear el título (misma altura para todas las tarjetas) */
.elementor-widget-woocommerce-products .woocommerce-loop-product__title {
    min-height: 45px !important; /* <- AJUSTA SI TIENES TITULOS LARGOS */
    line-height: 1.2em;
    text-align: center;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 4) Alinear el precio */
.elementor-widget-woocommerce-products ul.products li.product .price {
    text-align: center !important;
    margin: 8px 0 5px 0;
}

/* 5) Botón al final (incluso si ya lo personalizaste en Elementor) */
.elementor-widget-woocommerce-products ul.products li.product .woocommerce-loop-product__buttons {
    margin-top: auto !important; /* empuja el botón al fondo */
    text-align: center !important;
}









/* ============================================================
   HEADER MÓVIL: CENTRAR LOGO, CARRITO Y MENÚ HAMBURGUESA
   ============================================================ */

@media (max-width: 768px) {

    /* Contenedor principal del header móvil */
    .elementor-element-e22ce1c > .e-con-inner {
        display: flex !important;
        align-items: center !important; /* CENTRADO PERFECTO */
    }

    /* Cada bloque individual también se centra */
    .elementor-element-902129f,   /* logo */
    .elementor-element-f9820a3,   /* carrito */
    .elementor-element-654f1ed {  /* menú hamburguesa */
        display: flex !important;
        align-items: center !important;
    }

    /* Carrito: ajustar mínima separación hacia la hamburguesa */
    .elementor-element-f9820a3 {
        margin-right: 6px !important; /* Ajusta si quieres más cerca o más lejos */
    }

    /* Ícono del carrito: quitar padding vertical que lo baja */
    .elementor-menu-cart__toggle_button {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        line-height: 1 !important;
    }

    /* Hamburguesa: pequeña separación para que no se pegue demasiado al carrito */
    .elementor-element-654f1ed .elementor-menu-toggle {
        margin-left: 6px !important;
    }
}







/* PÁGINA CONOCE CITOCOL, ACORDEÓN DE IMAGENES CON INFORMACIÓN */
/* CONTENEDOR PRINCIPAL */
.acordeon {
    display: flex;
    width: 100%;
    min-height: 70vh;
}

/* CADA PANEL */
.acordeon .item {
    flex: 1;
    display: flex;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    transition: flex 0.8s ease;
    background-size: cover;
    background-position: center;
}

/* PANEL ACTIVO (EXPANDIDO) */
.acordeon .item.active {
    flex: 2.5;
}

/* OVERLAY OSCURO (para que el texto sea legible) */
.acordeon .item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.15), rgba(0,0,0,0.55));
    opacity: 0;
    transition: opacity 0.6s ease;
}

.acordeon .item.active::after {
    opacity: 1;
}

/* TEXTO */
.item-info {
    position: absolute;
    bottom: 40px;

    /* ALINEAR TEXTO IZQUIERDA Y PADDING PARA EVITAR CORTE EN EL TEXTO */
    left: 40px;          /* Alineado a la izquierda */
    right: auto;         /* Evita recorte derecho */
    padding-right: 40px; /* Espacio para que no se corte */
    padding-left: 0;     /* Ya tiene left:40px como padding natural */
    max-width: 500px;    /* Área de lectura sin romper diseño */
    text-align: left;    /* Alineación izquierda real */

    z-index: 3;
    color: white;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.45s ease, transform 0.55s ease;
}

/* TEXTO EN PANEL ACTIVO */
.acordeon .item.active .item-info {
    opacity: 1;
    transform: translateY(0);
	transition-delay: 0.30s;
}


/* FLECHAS DEL ACORDEON SOLO EN DESKTOP*/
/* FLECHAS DEL ACORDEÓN – SOLO DESKTOP */
@media (min-width: 769px){

  /* Flecha base (inactivos) */
  .acordeon .accordion-arrow{
    position: absolute !important;
    top: 22px;
    left: 50%;
    transform: translateX(70%);
    z-index: 5;
    pointer-events: none; /* CLAVE: no bloquea el click */
  }

  .acordeon .accordion-arrow img{
    width: 56px;
    height: 56px;
    display: block;
    opacity: 0.95;
    transition: opacity 0.2s ease;

    /* INACTIVO DEFAULT */
    content: url("https://colorantecitocol.kinsta.cloud/wp-content/uploads/2026/01/justo-abajo.png");
  }

  /* HOVER DEL PANEL (inactivo) */
  .acordeon .item:hover .accordion-arrow img{
    content: url("https://colorantecitocol.kinsta.cloud/wp-content/uploads/2026/01/justo-abajo-1.png");
  }

  /* ACTIVO: cambia imagen y posición */
  .acordeon .item.active .accordion-arrow{
    top: 18px;
    left: auto !important;
    right: 20px !important;
    transform: none !important;
  }

  .acordeon .item.active .accordion-arrow img{
    opacity: 1;
    content: url("https://colorantecitocol.kinsta.cloud/wp-content/uploads/2026/01/flecha-correcta.png");
  }

  /* (Opcional) evita hover “falso” cuando ya está activo */
  .acordeon .item.active:hover .accordion-arrow img{
    content: url("https://colorantecitocol.kinsta.cloud/wp-content/uploads/2026/01/flecha-correcta.png");
  }
}




/* RESPONSIVE */
/* === RESPONSIVE MOBILE (<= 768px) === */
@media (max-width: 768px) {

/* OCULTAR FLECHAS EN RESPONSIVE */
  .accordion-arrow{ display:none !important; }

	
    /* Los items se apilan */
    .acordeon {
        flex-direction: column;
        /*gap: 35px;*/
    }

    /* Cada panel más alto para mostrar bien la imagen */
    .acordeon .item {
        height: 550px; /* Puedes aumentar o reducir según la cara de la persona */
        flex: none;
        position: relative;
        background-position: center top; /* Muestra mejor las caras */
        background-size: cover;
    }

    /* Overlay más suave para lectura */
    .acordeon .item::after {
        opacity: 0.90;
		transition: none !important;
    }

    /* TEXTO SIEMPRE VISIBLE Y PERFECTAMENTE CENTRADO */
    .item-info {
        opacity: 1 !important;
        transform: none !important;

        position: absolute;
        bottom: 50px; /* Ajusta si quieres el texto más arriba o abajo */

        /* CENTRADO REAL */
        left: 50%;
        transform: translateX(-50%) !important;

        width: 90%; /* Ancho del bloque de texto dentro de la imagen */
        max-width: 350px; /* Evita que se haga demasiado ancho */
        padding: 15px 10px; /* Separación interna del texto */

        text-align: center !important;
    }

    .item-info h2 {
        font-size: 1.8rem !important;
        margin-bottom: 12px;
        line-height: 1.2;
    }

    .item-info p {
        font-size: 1rem !important;
        line-height: 1.45;
        margin: 0;
    }

	
	 /* 2) En mobile no queremos NINGÚN efecto cuando el JS ponga/quite .active */
  .acordeon .item,
  .acordeon .item.active {
    flex: none !important;
    transition: none !important; /* mata la animación de expansión */
  }

  .item-info,
  .acordeon .item.active .item-info {
    transition: none !important; /* mata fade/slide */
  }

  /* 3) (Opcional recomendado) que en mobile no parezca clickeable */
  .acordeon .item {
    cursor: default;
  }
}










/* ALINEACIÓN Y ESTILOS DE CUPÓN CON TOTALES EN PÁGINA CARRITO */
.e-cart__column-end .e-cart__column-inner {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.e-cart__column-end .coupon {
    flex: 1;
    max-width: 400px;
}

.e-cart__column-end .e-cart-totals {
    flex: 0 0 350px;
}

/* Separación entre cupón y totales */
.e-cart__column-end .e-cart__column-inner {
    display: flex;
    justify-content: space-between;
    gap: 60px;
    align-items: flex-start;
    margin-top: 20px;
}


/* ESTILOS */
/* ===== CUPÓN REFINADO — ESTILO EXACTO ===== */
/* ===== CONTENEDOR EXTERNO DEL CUPÓN ===== */
.coupon {
    max-width: 460px;
    margin: 0;
    padding: 0;
    background: transparent !important;
    border: none !important;
}

/* ===== CÁPSULA: input + botón dentro de UN SOLO BORDE ===== */
.coupon .coupon-col,
.coupon .form-row {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 0 !important;

    border: 1px solid #000;        /*  borde negro único */
    border-radius: 30px;           /*  bordes redondeados para TODO */
    padding: 0;
    margin: 0 !important;
    overflow: hidden;              /* lo que se salga, se recorta */
}

/* Los wrappers del input y botón NO deben meter márgenes */
.coupon .coupon-col-start,
.coupon .coupon-col-end {
    margin: 0 !important;
    padding: 0 !important;
}

/* ===== INPUT ===== */
.coupon input.input-text {
    width: 100%;
    padding: 12px 18px;
    font-size: 16px;
    background: #ffffff !important;
    
    border: none !important;       /* sin bordes individuales */
    outline: none !important;
    box-sizing: border-box;
    height: 46px;
}

/* quitar glow azul */
.coupon input.input-text:focus,
.coupon input.input-text:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* ===== BOTÓN AMARILLO ===== */
.coupon button.button,
.coupon button {
    background: #F7A200 !important;
    color: #000 !important;

    border: none !important;       /* sin borde propio, lo hace la cápsula */
    outline: none !important;

    padding: 0 26px;
    height: 46px;
    font-size: 15px;
    font-weight: 600;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* hover del botón */
.coupon button.button:hover {
    background: #d98f00 !important;
}

/* sin borde azul al hacer click */
.coupon button:focus,
.coupon button:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}



/* Caja general de totales */
.e-cart-totals {
    background: transparent;
    max-width: 420px;
}

/* Título "Subtotal / Total" */
.e-cart-totals h2,
.cart_totals h2 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
}

/* Filas tipo tarjetas */
.cart_totals table.shop_table tr th,
.cart_totals table.shop_table tr td {
    background: #f5f5f5 !important;
    padding: 14px 20px !important;
    border-radius: 12px;
    border: none !important;
    font-size: 16px;
}

.cart_totals table.shop_table {
    border-collapse: separate;
    border-spacing: 0 12px;
}




/* ALINEACIÓN general */
.wc-proceed-to-checkout a.checkout-button {
    background: #404C7E !important;
    color: #fff !important;
    padding: 16px 24px;
    border-radius: 20px !important;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    width: 100%;
    transition: 0.2s ease;
}

.wc-proceed-to-checkout a.checkout-button:hover {
    background: #2d375c !important;
}


.e-cart-totals .shop_table th {
    text-transform: uppercase;
    font-weight: 600;
}

.e-cart-totals .amount {
    font-weight: 600;
}









/* === Loop productos: alineación y tamaño uniforme === */
/* === Home Loop Carousel (Elementor Loop Item + Swiper): alturas iguales y alineación === */

/* 1) Asegurar que cada slide tenga misma altura y permita estirar la tarjeta */
.elementor-widget-loop-carousel .swiper-wrapper {
  align-items: stretch; /* clave en carrusel */
}

.elementor-widget-loop-carousel .swiper-slide.e-loop-item {
  height: auto !important;
  display: flex !important;
}

/* 2) La tarjeta (tu contenedor .loop-prod) como columna y altura completa */
.elementor-widget-loop-carousel .swiper-slide.e-loop-item .loop-prod {
  width: 100%;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

/* 3) Marco fijo para la imagen (misma altura en todos) */
.elementor-widget-loop-carousel .loop-prod .elementor-widget-theme-post-featured-image {
  margin-bottom: 12px;
}

.elementor-widget-loop-carousel .loop-prod .elementor-widget-theme-post-featured-image a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 190px;              /* <-- AJUSTA ESTE VALOR */
  width: 100%;
  overflow: hidden;
}

/* 4) Imagen sin distorsión */
.elementor-widget-loop-carousel .loop-prod .elementor-widget-theme-post-featured-image img {
  max-height: 190px;          /* debe coincidir con el height de arriba */
  width: auto !important;
  max-width: 100%;
  object-fit: contain !important;
  display: block;
}

/* 5) Título con altura consistente (para que botones queden alineados) */
.elementor-widget-loop-carousel .loop-prod .product_title,
.elementor-widget-loop-carousel .loop-prod .elementor-heading-title {
  min-height: 52px;           /* ~2 líneas, ajusta según tu tipografía */
  line-height: 1.2em;
  text-align: center;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 6) Botón al fondo siempre */
.elementor-widget-loop-carousel .loop-prod .elementor-widget-button {
  margin-top: auto !important;
}











/* === Single Product: Loop Grid "Productos relacionados" alineado === */

/* 1) Estirar items para que todas las tarjetas tengan la misma altura */
.rel-loop .elementor-loop-container {
  align-items: stretch;
}

.rel-loop .e-loop-item {
  height: 100% !important;
  display: flex !important;
}

/* 2) Tu tarjeta (loop item template) */
.rel-loop .e-loop-item .loop-prod {
  width: 100%;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

/* 3) Marco fijo para imagen (misma altura, sin distorsión) */
.rel-loop .loop-prod .elementor-widget-theme-post-featured-image a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 190px;              /* <-- AJUSTA ESTE VALOR */
  width: 100%;
  overflow: hidden;
}

/* 4) Imagen sin distorsión */
.rel-loop .loop-prod .elementor-widget-theme-post-featured-image img {
  max-height: 190px;          /* igual al height de arriba */
  width: auto !important;
  max-width: 100%;
  object-fit: contain !important;
  display: block;
}

/* 5) Título con altura consistente */
.rel-loop .loop-prod .product_title,
.rel-loop .loop-prod .elementor-heading-title {
  min-height: 52px;
  line-height: 1.2em;
  text-align: center;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 6) Botón siempre al fondo */
.rel-loop .loop-prod .elementor-widget-button {
  margin-top: auto !important;
}









	/* MINIATURA EN CHECKOUT WIDGET PAGAR */
/* =========================
   Checkout – ajustes mínimos y seguros
   ========================= */

/* Imagen del producto: más pequeña y sin recorte feo */
/*.woocommerce-checkout-review-order-table .product-name img{
  width: 48px;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
}*/


/* Separación elegante entre imagen y nombre */
/*.woocommerce-checkout-review-order-table td.product-name img{
  margin-right: 10px;
}*/



/* =========================
   RESPONSIVE Checkout (móvil): imagen izquierda | nombre horizontal | x1 separado
   ========================= */
@media (max-width: 767px){

  /* Celda producto */
  .woocommerce-checkout-review-order-table td.product-name{
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
  }

  /* Item (img + nombre) ocupa espacio real */
  .woocommerce-checkout-review-order-table td.product-name .citocol-checkout-item{
    display: flex !important;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 140px; /* 👈 CLAVE: evita texto vertical */
  }

  /* Imagen */
  .woocommerce-checkout-review-order-table td.product-name .citocol-checkout-thumb{
    width: 44px;
    height: 44px;
    object-fit: contain !important;
    border-radius: 6px;
    flex: 0 0 44px;
  }

  /* Nombre: SIEMPRE horizontal */
  .woocommerce-checkout-review-order-table td.product-name .citocol-checkout-name{
    display: block;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
    line-height: 1.25;
    min-width: 0;
  }

  /* Cantidad: separada del nombre */
  .woocommerce-checkout-review-order-table td.product-name .product-quantity{
    flex: 0 0 auto;
    margin-left: 12px;
    white-space: nowrap;
  }

  /* Precio */
  .woocommerce-checkout-review-order-table td.product-total{
    text-align: right;
    white-space: nowrap;
  }

  /* =========================
     HEADERS
     ========================= */

  /* Producto: ligeramente a la izquierda */
  .woocommerce-checkout-review-order-table thead th.product-name{
    text-align: left !important;
    padding-left: 15px; /* ajuste fino */
  }

  /* Subtotal: centrado */
  .woocommerce-checkout-review-order-table thead th.product-total{
    text-align: right !important;
  }


  /* =========================
     SUBTOTAL / TOTAL (BLOQUE)
     ========================= */

  /* Mantén alineación interna natural */
 .woocommerce-checkout-review-order-table tfoot th{
    text-align: left !important;
  }

  .woocommerce-checkout-review-order-table tfoot td{
    text-align: right !important;
  }
	
	
  /* AJUSTES ADICIONALES */
  .elementor-widget-woocommerce-checkout-page .woocommerce 
  .woocommerce-checkout-review-order-table .cart_item td.product-total {
		vertical-align: middle;
  }
  
  .elementor-widget-woocommerce-checkout-page .woocommerce 
  .woocommerce-checkout-review-order-table .cart_item td.product-name{ 
	  max-width: 280px !important;
  }
}



/* ALINEACIÓN DE CHECKOUT PRODUCTOS DESKTOP */
/* =========================================
   CHECKOUT RESUMEN (DESKTOP/TABLET)
   Reset de tabla + alineación limpia
   (pegar al FINAL del CSS)
   ========================================= */
@media (min-width: 768px){

  /* 1) RESET: devuelve la tabla a "tabla" aunque otro CSS la haya cambiado */
  .e-checkout__order_review .woocommerce-checkout-review-order-table{
    display: table !important;
    width: 100% !important;
    table-layout: auto !important; /* importante: evita colapsos */
  }
  .e-checkout__order_review .woocommerce-checkout-review-order-table thead{
    display: table-header-group !important;
  }
  .e-checkout__order_review .woocommerce-checkout-review-order-table tbody{
    display: table-row-group !important;
  }
  .e-checkout__order_review .woocommerce-checkout-review-order-table tfoot{
    display: table-footer-group !important;
  }
  .e-checkout__order_review .woocommerce-checkout-review-order-table tr{
    display: table-row !important;
  }
  .e-checkout__order_review .woocommerce-checkout-review-order-table th,
  .e-checkout__order_review .woocommerce-checkout-review-order-table td{
    display: table-cell !important;
    vertical-align: middle !important;
  }

  /* 2) Header y valores de Subtotal alineados */
  .e-checkout__order_review .woocommerce-checkout-review-order-table th.product-total,
  .e-checkout__order_review .woocommerce-checkout-review-order-table td.product-total{
    text-align: right !important;
    white-space: nowrap !important;
    padding-right: 0 !important; /* mismo borde para header y valores */
    width: 160px !important;     /* ajusta 140–200 si quieres */
  }

  /* 3) Dentro del td de producto, sí usamos flex (solo adentro) */
  .e-checkout__order_review .woocommerce-checkout-review-order-table td.product-name{
    text-align: left !important;
    padding-right: 18px !important; /* separa del bloque de precios */
  }

  .e-checkout__order_review .woocommerce-checkout-review-order-table td.product-name{
    /* flex interno sin romper la tabla */
    display: flex !important;
    align-items: center !important;
    gap: 14px !important; /* separa nombre de la imagen */
    min-width: 0 !important;
  }

  .e-checkout__order_review .woocommerce-checkout-review-order-table td.product-name .citocol-checkout-item{
    display: flex !important;
    align-items: center !important;
    gap: 45px !important;
    flex: 1 1 auto !important;
    min-width: 260px !important; /* anti “texto vertical” */
  }

  .e-checkout__order_review .woocommerce-checkout-review-order-table td.product-name .citocol-checkout-thumb{
    width: 55px !important;
    height: 60px !important;
    object-fit: contain !important;
    border-radius: 6px !important;
    flex: 0 0 48px !important;
    margin: 0 !important;
  }

  .e-checkout__order_review .woocommerce-checkout-review-order-table td.product-name .citocol-checkout-name{
    display: block !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important; /* NO “anywhere” */
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .e-checkout__order_review .woocommerce-checkout-review-order-table td.product-name .product-quantity{
    margin-left: 14px !important; /* separa cantidad del nombre */
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }



/* =========================================
   CHECKOUT RESUMEN: alinear Subtotal/Total (tfoot)
   con la columna de precios de arriba
   ========================================= */


  /* Asegura mismo ancho de columna para header, precios y tfoot */
  .e-checkout__order_review .woocommerce-checkout-review-order-table{
    table-layout: fixed !important; /* clave: respeta widths */
  }

  /* Columna derecha (header + precios de productos) */
  .e-checkout__order_review .woocommerce-checkout-review-order-table th.product-total,
  .e-checkout__order_review .woocommerce-checkout-review-order-table td.product-total{
    width: 160px !important;      /* ajusta si quieres */
    text-align: right !important;
    padding-right: 0 !important;
    white-space: nowrap !important;
  }

  /* Columna derecha del bloque Subtotal/Total (tfoot) */
  .e-checkout__order_review .woocommerce-checkout-review-order-table tfoot td{
    width: 160px !important;      /* MISMO valor que arriba */
    text-align: right !important;
    padding-right: 0 !important;
    white-space: nowrap !important;
  }

  /* (Opcional) evita que la etiqueta empuje raro */
  .e-checkout__order_review .woocommerce-checkout-review-order-table tfoot th{
    text-align: left !important;
  }
}







/* AGREGAR HEADER "CANTIDAD" AL RESUMEN DE CHECKOUT WIDGET PAGAR */
/* =========================================
   CHECKOUT RESUMEN: Header "Cantidad" SIN romper layout
   (solo DESKTOP/TABLET)
   Sustituye COMPLETO tu bloque actual por este
   ========================================= */
@media (min-width: 768px){

  /* Ancho de la “columna” visual de cantidad (ajústalo si quieres) */
  .e-checkout__order_review{
    --ctc-qty-w: 90px; /* prueba 70–120 */
  }

  /* ====== SOLO HEADER ======
     NO volvemos flex el th (eso era lo que rompía todo)
  */
  .e-checkout__order_review .woocommerce-checkout-review-order-table thead th.product-name{
    position: relative !important;
    padding-right: calc(var(--ctc-qty-w) + 16px) !important; /* reserva espacio para “Cantidad” */
  }

  .e-checkout__order_review .woocommerce-checkout-review-order-table thead th.product-name::after{
    content: "Cantidad";
    position: absolute !important;
    right: -100px !important;
    top: 30% !important;
    transform: translateY(-50%) !important;
    width: var(--ctc-qty-w) !important;
    text-align: center !important;
    white-space: nowrap !important;
    pointer-events: none;
  }
}





/* =========================================
   CHECKOUT RESUMEN – RESPONSIVE
   Header "Cantidad" alineado con xN
   ========================================= */
@media (max-width: 767px){

  /* Ancho de la columna Cantidad (ajústalo si quieres) */
  .e-checkout__order_review{
    --ctc-qty-w: 4px; /* prueba 56–72 */
  }

  /* HEADER: Producto + Cantidad + Subtotal */
  .e-checkout__order_review 
  .woocommerce-checkout-review-order-table thead th.product-name{
    display: flex !important;
    align-items: center !important;
    /*justify-content: space-between !important;*/
    gap: 100px !important;
  }

  /* Título "Cantidad" */
  .e-checkout__order_review 
  .woocommerce-checkout-review-order-table thead th.product-name::after{
    content: "Cantidad";
    flex: 0 0 var(--ctc-qty-w) !important;
    text-align: center !important;
    font-size: 13px;
    white-space: nowrap;
  }

  /* FILAS */
  .e-checkout__order_review 
  .woocommerce-checkout-review-order-table td.product-name{
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  /* Imagen + nombre */
  .e-checkout__order_review 
  .woocommerce-checkout-review-order-table td.product-name .citocol-checkout-item{
    display: flex !important;
    align-items: center !important;
    gap: 10px;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* Cantidad alineada bajo su header */
  .e-checkout__order_review 
  .woocommerce-checkout-review-order-table td.product-name .product-quantity{
    flex: 0 0 var(--ctc-qty-w) !important;
    text-align: center !important;
    margin-left: 0 !important;
    white-space: nowrap !important;
  }
}








/* OCULTAR TÍTULO "DETALLES DE FACTURACIÓN" DEL CHECKOUT */
/* =========================
   Checkout – Ocultar "Detalles de facturación"
   ========================= */

/* Oculta el título */
.woocommerce-checkout .woocommerce-billing-fields > h3{
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Elimina espacio superior que queda en el bloque */
.woocommerce-checkout .woocommerce-billing-fields{
  margin-top: 0 !important;
  padding-top: 0 !important;
}




/* AUMENTO DE ESPACIO ENTRE FORMULARIO Y RESUMEN DE COMPRA DEL CHECKOUT */

/* =========================
   Checkout Citocol – Más espacio entre columnas
   ========================= */

/* Aplica SOLO al widget con nuestra clase */
.citocol-checkout-narrow .e-checkout__container{
  max-width: 1200px; /* controla el ancho total del checkout */
}

/* Columna izquierda (formulario) un poco más estrecha */
.citocol-checkout-narrow .e-checkout__column-start{
  max-width: 495px;
}

/* Espacio real entre formulario y resumen */
.citocol-checkout-narrow .e-checkout__column{
  column-gap: 80px; /* espacio central */
}




/* FORZAR QUE APAREZCA EL CHECKBOX DE TERMINOS Y CONDICIONES */
/* === FORZAR VISIBILIDAD CHECKBOX TÉRMINOS WOOCOMMERCE === */
.woocommerce-checkout 
label.woocommerce-form__label.woocommerce-form__label-for-checkbox.checkbox {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: none !important;
  position: static !important;
  overflow: visible !important;
  pointer-events: auto !important;
  margin: 10px 0 !important;
}

/* Asegura que el input también sea visible */
.woocommerce-checkout 
label.woocommerce-form__label-for-checkbox input#terms {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Asegura que el texto no esté oculto */
.woocommerce-checkout 
.woocommerce-terms-and-conditions-checkbox-text {
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
}


/* === OCULTAR CHECKBOX "CREAR UNA CUENTA" EN CHECKOUT === */
.woocommerce-checkout 
.woocommerce-account-fields {
  display: none !important;
}



/* BAJAR EL BOTÓN DE INICIAR SESIÓN EN EL CHECKOUT */
/* =========================
   Checkout – Login Elementor (desktop/tablet)
   Botón abajo, tamaño original, alineado IZQUIERDA
   ========================= */
@media (min-width: 768px){

  /* NO tocar layout original de inputs */
  .woocommerce-checkout .e-woocommerce-login-section .e-login-wrap,
  .woocommerce-checkout .e-woocommerce-login-section .e-login-wrap-start{
    display: block !important;
  }

  /* Baja el bloque del botón debajo de los inputs */
  .woocommerce-checkout .e-woocommerce-login-section .e-login-wrap-end{
    clear: both;
    width: 100%;
    margin-top: 12px;
  }

  /* Quita label vacío y evita alineaciones raras */
  .woocommerce-checkout .e-woocommerce-login-section .e-login-wrap-end .e-login-label{
    display: none !important;
  }

  /* IMPORTANTÍSIMO: el contenedor del botón a la izquierda */
  .woocommerce-checkout .e-woocommerce-login-section .e-login-wrap-end .form-row{
    margin: 0 !important;
    text-align: left !important;
  }

  /* Botón: tamaño original (NO full width) y a la izquierda */
  .woocommerce-checkout .e-woocommerce-login-section .e-login-wrap-end .e-woocommerce-form-login-submit{
    width: auto !important;
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Bloque "recuérdame / olvidaste" sin empujarlo a la derecha */
  .woocommerce-checkout .e-woocommerce-login-section .e-login-actions-wrap{
    margin-top: 8px;
	margin-left: -15px !important;
    display: flex;
    justify-content: flex-start;
    gap: 18px;
  }

  .woocommerce-checkout .e-woocommerce-login-section .e-login-actions-wrap-end{
    text-align: left !important;
  }

  .woocommerce-checkout .e-woocommerce-login-section .lost_password{
    margin: 0 !important;
  }
}










/* HOVER VIDEOS PÁGINA IDEAS CREATIVAS Y MÁS*/
/* =========================================
   Video hover overlay (debajo del icono play)
   Clase: video-hover
   ========================================= */

.video-hover{
  position: relative;
  overflow: hidden;
  border-radius: 16px; /* ajusta */
}

/* Asegura stacking correcto */
.video-hover .elementor-wrapper{
  position: relative;
}

/* La imagen overlay de Elementor */
.video-hover .elementor-custom-embed-image-overlay{
  position: relative;
}

/* Overlay oscuro (debajo del play) */
.video-hover .elementor-custom-embed-image-overlay::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 1;              /* 👈 debajo del play */
  pointer-events: none;
}

/* El botón play por encima */
.video-hover .elementor-custom-embed-play{
  position: absolute;      /* Elementor ya lo usa, pero lo reforzamos */
  z-index: 2;              /* 👈 arriba del overlay */
}

/* Hover */
.video-hover:hover .elementor-custom-embed-image-overlay::after{
  opacity: 1;
}

/* =========================================
   Icono de play con efecto grow
   ========================================= */

/* Animamos SOLO el icono (svg), no el contenedor */
.video-hover .elementor-custom-embed-play svg{
  transition: transform 0.35s ease;
  transform-origin: center;
}

/* Hover: zoom del icono */
.video-hover:hover .elementor-custom-embed-play svg{
  transform: scale(1.12); /* ajusta 1.08 – 1.18 */
}









/* ACORDEONES BORDES UNIDOS AL MOMENTO DE EXPANDIRSE */
/* =========================================
   CITOCOL - Nested Accordion: header + body unidos
   Clase: ctc-acc-unido
   ========================================= */

/* Variables por si quieres ajustar una sola vez */
.ctc-acc-unido{
  --ctc-acc-radius: 14px;
  --ctc-acc-border: rgba(0,0,0,.12);
  --ctc-acc-sep:    rgba(0,0,0,.08);
}

/* 1) La “tarjeta” real es el <details> */
.ctc-acc-unido .e-n-accordion .e-n-accordion-item{
  border: 1px solid var(--ctc-acc-border) !important; /* borde único */
  border-radius: var(--ctc-acc-radius) !important;    /* radio único */
  overflow: hidden !important;                         /* clave para que se vea 1 sola pieza */
  margin-bottom: 14px;                                 /* separa items */
  background: transparent;
}

/* 2) Quitamos bordes internos para evitar doble línea */
.ctc-acc-unido .e-n-accordion .e-n-accordion-item-title,
.ctc-acc-unido .e-n-accordion .e-n-accordion-item > [role="region"]{
  border: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important; /* el radio lo manda <details> */
}

/* 3) Separador entre header y contenido (opcional, sutil y limpio) */
.ctc-acc-unido .e-n-accordion .e-n-accordion-item > [role="region"]{
  border-top: 1px solid var(--ctc-acc-sep) !important;
}

/* 4) Si el header trae fondo y quieres que “corte” perfecto sin esquinas raras */
.ctc-acc-unido .e-n-accordion .e-n-accordion-item-title{
  /* no tocamos tu color; solo aseguramos continuidad */
  display: flex;
  align-items: center;
}

/* 5) Si quieres CERO línea entre azul y gris, activa esto (en vez del separador):
.ctc-acc-unido .e-n-accordion .e-n-accordion-item > [role="region"]{
  border-top: 0 !important;
}
*/










/* OCULTAR MENSAJE EN REGISTRAR USUARIO DE ERROR EN CONTRASEÑA AL ENVIAR FORMULARIO DEJANDO MENSAJE SOLO DE JS */
/* Oculta ese span de error inline */
.elementor-message.elementor-message-danger.elementor-help-inline.elementor-form-help-inline{
  display: none !important;
}



/* MENSAJE DE USUARIO Y/O CONTRASEÑA INCORRECTA EN LOGIN DE USUARIOS */
/* Mensaje de error login personalizado */
.login-error-msg{
  color: #c62828;               /* rojo visible */
  background: #fdecea;          /* fondo suave */
  border: 1px solid #f5c2c7;
  border-left: 4px solid #c62828;

  padding: 5px 9px;
  margin: 0px 0 0px 0px;    /* 👈 lo mueve un poco a la izquierda */
  border-radius: 6px;

  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}









/* PRUEBA QUITAR LINKS DE CATEGORIAS Y ETIQUETAS DE SINGLE PRODUCTO/PRODUCTOS INTERNA */
/* === Citocol: deshabilitar links de categorías y etiquetas en single product === */
/* === Citocol: deshabilitar links de categorías y etiquetas en single product === */
body.single-product .citocol-product-terms a {
  pointer-events: none !important;
  cursor: default !important;
  text-decoration: none !important;
  color: inherit !important;
}














/* ESTILOS PARA EL BOTÓN DE VOLVER ARRIBA (SCROLL TO TOP) */

#scrollToTopBtn {
    /* Posicionamiento fijo en la parte inferior derecha */
    position: fixed;
    bottom: 30px; /* Separación del fondo */
    right: 27px; /* Separación de la derecha */
    z-index: 20; /* Asegura que esté por encima de otros elementos */

    /* Dimensiones y forma circular */
    width: 56px;
    height: 56px;
    border-radius: 50%;
    
    /* Colores y apariencia */
    background-color: #000000; /* negro */
    color: #ffffff; /* Flecha blanca */
    border: none;
    cursor: pointer;
    display: flex; /* Para centrar el icono SVG */
    align-items: center;
    justify-content: center;

    /* Sombra suave para un efecto moderno (armonía con tu diseño) */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);

    /* Control de visibilidad con JavaScript */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.2s ease;
    transform: scale(0.95); /* Ligeramente más pequeño en estado normal */
}

/* Estilo al pasar el ratón (hover) y al presionar (active) */
#scrollToTopBtn:hover {
    background-color: #F7A200; /* Amarillo al pasar el ratón */
    transform: scale(1.0); /* Efecto de crecimiento suave */
}

#scrollToTopBtn:active {
    transform: scale(0.9); /* Efecto de "presionado" */
}

/* Clase que JavaScript agregará para mostrar el botón */
#scrollToTopBtn.show {
    opacity: 1;
    visibility: visible;
}

/* Ajuste para dispositivos móviles (opcional, pero recomendado) */
@media (max-width: 768px) {
    #scrollToTopBtn {
        bottom: 35px;
        right: 28px;
        width: 50px;
        height: 50px;
    }
}







/* ALINEAR PRODUCTOS DEL WIDGET PRODUCTS EN TIENDA EN LÍNEA */
/* 1. Forzar que cada tarjeta sea un contenedor flexible vertical */
.elementor-widget-woocommerce-products ul.products li.product {
    display: flex !important;
    flex-direction: column;
    height: 100% !important;
}

/* 2. La parte superior (imagen + título + precio) crece */
.elementor-widget-woocommerce-products ul.products li.product a.woocommerce-LoopProduct-link {
    flex-grow: 1;
    display: flex !important;
    flex-direction: column;
}

/* 3. Mantener el botón siempre abajo */
.elementor-widget-woocommerce-products ul.products li.product .woocommerce-loop-product__buttons {
    margin-top: auto !important;
}

/* 4. Alinear títulos */
.elementor-widget-woocommerce-products h2.woocommerce-loop-product__title {
    min-height: 45px; /* Ajusta este valor si necesitas más o menos espacio */
    display: flex;
    align-items: flex-end;
    text-align: center;
}










/* ================================================
   SELECT PARA PESTAÑAS DE CATEGORÍAS DE PRODUCTOS
   ================================================ */

/* El select está oculto en desktop */
.categorias-tabs .tabs-dropdown {
    display: none;
}

@media (max-width: 768px) {

    /* Ocultar SOLO los títulos de las pestañas */
    .categorias-tabs .e-n-tabs-heading {
        display: none !important;
    }

    /* ======== SELECT ESTILIZADO ======== */
    .categorias-tabs .tabs-dropdown {
        display: block;
        width: 100%;
        margin-bottom: 15px;

        /* Más espacio para la flecha */
        padding: 12px 50px 12px 14px;

        /* Tipografía */
        font-size: 16px;
        line-height: 1.3;

        /* Borde normal */
        border: 1px solid rgba(0, 0, 0, 0.25);
        border-radius: 8px;
        background-color: #fff;

        /* Quitar apariencia nativa */
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;

        /* Flecha SVG más separada */
        background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

        background-repeat: no-repeat;
        background-size: 20px;

        /* Mover flecha más hacia adentro */
        background-position: right 18px center !important; 
    }

    /* ======== FOCUS (cuando lo presionas) ======== */
    .categorias-tabs .tabs-dropdown:focus {
        /* Quitar borde grueso nativo */
        outline: none !important;

        /* Sin borde agresivo */
        border-color: rgba(0, 0, 0, 0.35);

        /* Reemplazar el borde feo por uno elegante */
        box-shadow: 0 0 0 2px rgba(0,0,0,0.08);
    }
}














/* Deshabilitar la opción de expandir (resize) para todos los campos de textarea */
textarea {
    resize: none !important;
}





/* BOTÓN WHATSAPP */

.whatsapp-elementor-btn .elementor-button {
    /* **CÓDIGO PARA FORZAR LA FORMA REDONDA Y AUMENTAR EL TAMAÑO** */
    width: 56px !important; 
    height: 56px !important; 
    border-radius: 50% !important; /* FUERZA EL CÍRCULO */
    padding: 0 !important; 
    
    /* Aseguramos la alineación del icono */
    display: flex;
    align-items: center;
    justify-content: center;

}

/* Ajuste del icono */
.whatsapp-elementor-btn .elementor-button i,
.whatsapp-elementor-btn .elementor-button .elementor-button-icon {
    font-size: 30px !important; /* ¡ICONO MÁS GRANDE! */
    width: 30px !important; /* Asegura que el contenedor de icono tenga el mismo tamaño */
    height: 30px !important;
}







/* ARREGLO DE TAMAÑO DE ICONOS SOCIALES EN HEADER Y FOOTER */
.elementor-location-header .elementor-social-icon i,
.elementor-location-header .elementor-social-icon svg,
.elementor-location-footer .elementor-social-icon i,
.elementor-location-footer .elementor-social-icon svg{
  display: block;
  width: 1em;
  height: 1em;
}

.elementor-location-header .elementor-social-icon-facebook-f i,
.elementor-location-header .elementor-social-icon-facebook-f svg,
.elementor-location-header .elementor-social-icon-facebook i,
.elementor-location-header .elementor-social-icon-facebook svg,
.elementor-location-footer .elementor-social-icon-facebook-f i,
.elementor-location-footer .elementor-social-icon-facebook-f svg,
.elementor-location-footer .elementor-social-icon-facebook i,
.elementor-location-footer .elementor-social-icon-facebook svg{
  transform: scale(1.10);
  transform-origin: center;
}

.elementor-location-header .elementor-social-icon-youtube i,
.elementor-location-header .elementor-social-icon-youtube svg,
.elementor-location-footer .elementor-social-icon-youtube i,
.elementor-location-footer .elementor-social-icon-youtube svg{
  transform: scale(1.35);
  transform-origin: center;
}





/* HOOVER COMPLETO PARA PRODUCTOS EN HOME/INCIO */
.citocol-product-card:hover .elementor-button,
.citocol-product-card:focus-within .elementor-button{
  background-color: #F7A200 !important;
  color: #fff !important;
}






/* ACERCAR CAMPO DE COMENTARIOS SOBRE PEDIDO EN CHECK OUT */
/* Último campo del bloque de facturación */
/*.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > p:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}*/

/* Contenedor de información adicional */
/*.woocommerce-checkout .woocommerce-additional-fields {
  margin-top: -10px !important; *//* 👈 clave */
 /* padding-top: 0 !important;
}*/

/* Campo de notas */
/*.woocommerce-checkout #order_comments_field {
  margin-top: 0 !important;
  padding-top: 0 !important;
}*/

/* Título (si existe, aunque esté oculto visualmente) */
/*.woocommerce-checkout .woocommerce-additional-fields > h3 {
  margin: 0 0 6px 0 !important;
}*/

/* Wrapper interno */
/*.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
  margin-top: 0 !important;
  padding-top: 0 !important;
}*/










/* FIX overflow global: container del header con margin-left negativo */
/* Override fuerte al container exacto (por data-id y clase) */
body .elementor-element.elementor-element-1d6e9e3[data-id="1d6e9e3"]{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* FOOTER: evita overflow por estructura de form (gutter/anchos) */
.elementor-location-footer .elementor-form-fields-wrapper{
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.elementor-location-footer .elementor-form,
.elementor-location-footer .elementor-form *{
  max-width: 100% !important;
  box-sizing: border-box !important;
}







/* ESTILOS A MENSAJES PREDETERMINADOS DE AGREGAR A CARRITO */
/* =========================================
   CITOCOL – WooCommerce notices
   Mensaje + botón "Ver carrito"
   (solo colores y botón)
   ========================================= */

/* -----------------------------------------------------------------
   1) VARIABLES (si te piden cambios, solo toca aquí)
   ----------------------------------------------------------------- */
:root{
  /* Mensaje */
  --ctc-notice-top-line: #F7A200; /* línea superior */
  --ctc-notice-text: #000000;     /* texto */
  --ctc-notice-bg: #F5F5F5;       /* fondo gris del mensaje */

  /* Botón */
  --ctc-btn-bg: #F7A200;          /* fondo botón */
  --ctc-btn-text: #FFFFFF;        /* texto botón */
  --ctc-btn-bg-hover: #444E7E;    /* fondo hover */
  --ctc-btn-text-hover: #F7A200;  /* texto hover */
}

/* -----------------------------------------------------------------
   2) MENSAJE (solo colores)
   ----------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info{
  background-color: var(--ctc-notice-bg) !important; /* fondo editable */
  color: var(--ctc-notice-text) !important;
  border-top-color: var(--ctc-notice-top-line) !important;
}

/* -----------------------------------------------------------------
   3) ICONOS
   Se mantienen colores nativos de Woo
   ----------------------------------------------------------------- */
/* No se toca nada aquí a propósito */

/* -----------------------------------------------------------------
   4) BOTÓN "VER CARRITO"
   ----------------------------------------------------------------- */
.woocommerce-message a.button.wc-forward,
.woocommerce-info a.button.wc-forward,
.woocommerce-error a.button.wc-forward{
  background-color: var(--ctc-btn-bg) !important;
  color: var(--ctc-btn-text) !important;

  border-radius: 10px !important;
  padding: 10px 18px !important;
  line-height: 1 !important;

  text-decoration: none !important;
}

/* -----------------------------------------------------------------
   5) HOVER BOTÓN
   ----------------------------------------------------------------- */
.woocommerce-message a.button.wc-forward:hover,
.woocommerce-info a.button.wc-forward:hover,
.woocommerce-error a.button.wc-forward:hover{
  background-color: var(--ctc-btn-bg-hover) !important;
  color: var(--ctc-btn-text-hover) !important;
}






/* ESTILOS DE PÁGINA UBICACIONES/ DEL MAPA Y SELECTOR */
/* =========================================
   LOCATEANDFILTER – Estilo tipo referencia
   Scope: .laf-ubis
   ========================================= */

.laf-ubis{
  --laf-card-radius: 10px;
  --laf-card-border: #e6e6e6;
  --laf-card-shadow: 0 8px 18px rgba(0,0,0,.08);

  --laf-label-size: 13.5px;   /* "Dirección:" */
  --laf-value-size: 13px;   /* el texto del dato */
  --laf-title-size: 18px;

  --laf-filter-height: 44px;
  --laf-filter-radius: 12px;
  --laf-filter-border: #d7d7d7;
}


.laf-ubis .nice-tooltips .leaflet-popup-content-wrapper {
    padding: 15px;
}


/* ---------- NAVLIST: tarjetas ---------- */
.laf-ubis .navlist-title b{
  font-size: var(--laf-title-size);
  display: block;
  margin-bottom: 6px;
}

.laf-ubis .navlist-content,
.laf-ubis .navlist-stripp-content{
  font-size: var(--laf-value-size);
  line-height: 1.35;
}

.laf-ubis .navlist-content{
  background: #fff;
  border: 1px solid var(--laf-card-border);
  border-radius: var(--laf-card-radius);
  box-shadow: var(--laf-card-shadow);
  padding: 14px 16px;
  margin-bottom: 14px;
}

/* Etiquetas en negrita (Dirección:, Teléfono:, Horario:) */
.laf-ubis .navlist-content b{
  font-size: var(--laf-label-size);
  font-weight: 800;
  margin-right: 6px;
}

/* Valores */
.laf-ubis .navlist-content span,
.laf-ubis .navlist-content a{
  font-size: var(--laf-value-size);
}

/* ---------- TOOLTIP: que se vea pro ---------- */
.laf-ubis .tooltip-wrap{
  font-size: var(--laf-value-size);
}

.laf-ubis .tooltip-thumb b{
  font-size: var(--laf-title-size);
}

.laf-ubis .tooltip-content b{
  font-size: var(--laf-label-size);
  font-weight: 800;
  margin-right: 6px;
}

.laf-ubis .tooltip-content span,
.laf-ubis .tooltip-content a{
  font-size: var(--laf-value-size);
  line-height: 1.35;
}

/* ---------- WAZE: icono más pequeño ---------- */
.laf-ubis .waze-bot a{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-weight: 700;
  text-decoration: none;
}

.laf-ubis .waze-bot img{
  width: 40px !important;
  height: 40px !important;
}

/* ---------- FILTROS/BUSCADOR: look tipo Guatex ---------- */
/* (Funciona aunque el plugin use select normal) */
.laf-ubis select,
.laf-ubis input[type="text"],
.laf-ubis input[type="search"]{
  width: 100%;
  height: var(--laf-filter-height);
  border-radius: var(--laf-filter-radius);
  border: 1px solid var(--laf-filter-border);
  background: #f3f3f3;
  padding: 0 14px;
  font-size: 15px;
  outline: none;
}

.laf-ubis select:focus,
.laf-ubis input[type="text"]:focus,
.laf-ubis input[type="search"]:focus{
  background: #fff;
  border-color: #bdbdbd;
}

/* Si el plugin usa Select2 (muy común), esto lo deja igual de bonito */
.laf-ubis .select2-container .select2-selection--single{
  height: var(--laf-filter-height) !important;
  border-radius: var(--laf-filter-radius) !important;
  border: 1px solid var(--laf-filter-border) !important;
  background: #f3f3f3 !important;
}

.laf-ubis .select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height: var(--laf-filter-height) !important;
  padding-left: 14px !important;
  font-size: 15px !important;
}

.laf-ubis .select2-container--default .select2-selection--single .select2-selection__arrow{
  height: var(--laf-filter-height) !important;
  right: 10px !important;
}


/* ----- Ajustes de cajas del navlist ------ */
/* MAPA – bordes redondeados */
.laf-ubis .leaflet-container{
  border-radius: 20px;
  overflow: hidden; /* 👈 MUY importante para que el mapa no se salga */
}

/* NAVLIST – menos ancho borde interior*/
.laf-ubis .navlist-content{
  max-width: 93.5%;   /* ← ESTE valor */
}

/* NAVLIST borde de afuera */
.laf-ubis .map-nav-item {
    border: none;
}

.laf-ubis .map-nav-item.focus {
    border: none;
    border-radius: 20px;
    padding: 5px;
}



/* =========================================
   MAPA + NAVLIST – Tipografía Mozilla Headline
   ========================================= */

.laf-ubis,
.laf-ubis .leaflet-container,
.laf-ubis .leaflet-popup,
.laf-ubis .leaflet-popup-content,
.laf-ubis .leaflet-popup-content *,

.laf-ubis .leaflet-control,
.laf-ubis .leaflet-control *,

.laf-ubis .navlist-content,
.laf-ubis .navlist-content *,
.laf-ubis .navlist-title,
.laf-ubis .navlist-title *,

.laf-ubis .tooltip-wrap,
.laf-ubis .tooltip-wrap *,

.laf-ubis .waze-bot,
.laf-ubis .waze-bot *{
  font-family: "Mozilla Headline", sans-serif !important;
}


/* COLOR Y HOVER DEL NÚMERO DE TELÉFONO EN MAPA DE NUESTRAS UBICACIONES */
/* =========================================
   TELÉFONO – clickeable + estilos finales
   Scope: .laf-ubis
   ========================================= */

/* Base: asegurar que el teléfono sea tocable */
.laf-ubis .telefono a.laf-tel{
  position: relative;
  z-index: 5;
  pointer-events: auto !important;
  cursor: pointer;
  text-decoration: none; /* sin subrayado por defecto */
  transition: color .2s ease, text-decoration-color .2s ease;
}

/* NAVLIST: teléfono en negro por defecto */
.laf-ubis .navlist-content .telefono a.laf-tel{
  color: #000000;
}

/* MAPA / TOOLTIP: mantiene el color que ya tenga (azul) */
.laf-ubis .tooltip-wrap .telefono a.laf-tel{
  color: inherit;
}

/* HOVER (NAVLIST + MAPA): amarillo + subrayado */
.laf-ubis .telefono a.laf-tel:hover{
  color: #F7A200;
  text-decoration: underline;
}

/* Evita que wrappers del plugin se coman el click */
.laf-ubis .navlist-content,
.laf-ubis .navlist-stripp-content,
.laf-ubis .map-nav-item{
  pointer-events: auto;
}








/* ANIMACIÓN DE FORMULARIO CHECKOUT WIDGET PAGAR */
/* =========================================
   Floating labels - WooCommerce Checkout
   Scope: .float-checkout
   ========================================= */

/* Base */
.float-checkout .woocommerce-checkout .form-row{
  position: relative;
  margin-top: 0 !important;
}

/* --- LABEL: que NO ocupe espacio arriba y viva dentro del campo --- */
.float-checkout .woocommerce-checkout .form-row > label{
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;

  /* clave: que no deje “label arriba” */
  display: block !important;
  width: auto !important;

  pointer-events: none !important;
  opacity: .75 !important;
  line-height: 1 !important;
  z-index: 5 !important;

  transition:
    top .18s ease,
    transform .18s ease,
    opacity .18s ease,
    font-size .18s ease;
}

/* Si el label viene como screen-reader-text, lo hacemos visible pero igual flotante */
.float-checkout .woocommerce-checkout .form-row > label.screen-reader-text{
  clip: auto !important;
  clip-path: none !important;
  height: auto !important;
  width: auto !important;
  overflow: visible !important;
  white-space: normal !important;
}

/* --- Inputs/textarea normales: espacio para el label --- */
.float-checkout .woocommerce-checkout .form-row .input-text,
.float-checkout .woocommerce-checkout .form-row textarea{
  padding-top: 18px !important; /*(18)*/
}

/* Placeholder fuera (para que no choque con el label) */
.float-checkout .woocommerce-checkout .form-row .input-text::placeholder,
.float-checkout .woocommerce-checkout .form-row textarea::placeholder{
  opacity: 0 !important;
}

/* --- SELECT2 (Departamento) – ajustes FINOS para que no se rompa --- */
.float-checkout .woocommerce-checkout .form-row .select2-container--default .select2-selection--single{
  height: auto !important;
  min-height: 48px;          /* ajusta si tu input es más alto */
  padding: 0 !important;     /* importante */
  display: flex !important;
  align-items: stretch !important;
}

.float-checkout .woocommerce-checkout .form-row .select2-container--default .select2-selection--single .select2-selection__rendered{
  padding-left: 12px !important;
  padding-right: 36px !important;
  padding-top: 18px !important;   /* espacio para label */
  padding-bottom: 8px !important;
  line-height: 1.2 !important;
}

.float-checkout .woocommerce-checkout .form-row .select2-container--default .select2-selection--single .select2-selection__arrow{
  height: 100% !important;
  top: 0 !important;
  right: 10px !important;
}

/* --- Estado: focus / filled (sube el label) --- */
.float-checkout .woocommerce-checkout .form-row.is-focus > label,
.float-checkout .woocommerce-checkout .form-row.is-filled > label{
  top: 6px !important;
  transform: translateY(0) !important;
  opacity: 1 !important;
  font-size: 14px !important;
}

/* Responsive */
@media (max-width: 767px){
  .float-checkout .woocommerce-checkout .form-row .input-text,
  .float-checkout .woocommerce-checkout .form-row textarea{
    padding-top: 24px !important;
  }

  .float-checkout .woocommerce-checkout .form-row .select2-container--default
  .select2-selection--single .select2-selection__rendered{
    padding-top: 24px !important;
  }

  .float-checkout .woocommerce-checkout .form-row > label{
    top: 54% !important;
  }

  .float-checkout .woocommerce-checkout .form-row.is-focus > label,
  .float-checkout .woocommerce-checkout .form-row.is-filled > label{
    top: 6px !important;
  }
}



/* =========================================
   EXCLUIR DEPARTAMENTO DEL FLOATING LABEL
   ========================================= */

/* Quitar posicionamiento flotante */
.float-checkout .woocommerce-checkout #billing_state_field > label{
  position: static !important;
  transform: none !important;
  opacity: 1 !important;
  font-size: 16px !important;
  margin-bottom: 6px !important;
  pointer-events: auto !important;
}

/* Resetear padding raro del select */
.float-checkout .woocommerce-checkout #billing_state_field
.select2-container--default
.select2-selection--single
.select2-selection__rendered{
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

/* Evitar que JS lo anime visualmente */
.float-checkout .woocommerce-checkout #billing_state_field{
  --no-float: 1;
}



/* =========================================
   EXCLUIR PAÍS / REGIÓN DEL FLOATING LABEL
   ========================================= */

/* Quitar posicionamiento flotante */
.float-checkout .woocommerce-checkout #billing_country_field > label{
  position: static !important;
  transform: none !important;
  opacity: 1 !important;
  font-size: 16px !important;
  margin-bottom: 6px !important;
  pointer-events: auto !important;
}

/* Resetear padding raro del select */
.float-checkout .woocommerce-checkout #billing_country_field
.select2-container--default
.select2-selection--single
.select2-selection__rendered{
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

/* Evitar que JS lo anime visualmente */
.float-checkout .woocommerce-checkout #billing_country_field{
  --no-float: 1;
}




/* =========================================
   CHECKOUT – Forzar * rojo en Dirección de Entrega
   (billing_address_2)
   ========================================= */

/* 1) Ocultamos el span required que Woo/tema está escondiendo raro */
.float-checkout .woocommerce-checkout #billing_address_2_field > label .required{
  display: none !important;
}

/* 2) Creamos el * con ::after (SIEMPRE visible) */
.float-checkout .woocommerce-checkout #billing_address_2_field > label::after{
  content: " *";
  color: #a00;
  font-weight: 600;
}



/* CMABIO DE COLOR DEL CAMPO DEL CHECKOUT AL ESTAR LLENO */
/* =========================================
   CHECKOUT – Color cuando el campo está lleno
   Scope: .float-checkout
   ========================================= */

/* Ajusta colores aquí */
.float-checkout{
  --fl-filled-bg: #F3F6FF;     /* fondo cuando está lleno */
  --fl-filled-border: #444E7E; /* borde cuando está lleno (opcional) */
}

/* Inputs + textarea (cuando el form-row tiene .is-filled) */
.float-checkout .woocommerce-checkout .form-row.is-filled .input-text,
.float-checkout .woocommerce-checkout .form-row.is-filled textarea{
  background: var(--fl-filled-bg) !important;
  border-color: var(--fl-filled-border) !important;
}

/* (Opcional) si también quieres que cambie al enfocar */
.float-checkout .woocommerce-checkout .form-row.is-focus .input-text,
.float-checkout .woocommerce-checkout .form-row.is-focus textarea{
  border-color: var(--fl-filled-border) !important;
}


/* =========================================
   CHECKOUT – Más aire en inputs/textarea
   Scope: .float-checkout
   ========================================= */

/* Ajustes rápidos aquí */
.float-checkout{
  --ctc-pad-y: 16px;     /* 👈 aire vertical (12–18) */
  --ctc-pad-x: 12px;
  --ctc-min-h: 52px;     /* 👈 altura mínima (48–56) */
}

/* Inputs directos en form-row (como tu campo de ejemplo) */
.float-checkout .woocommerce-checkout .form-row > .input-text{
  padding: var(--ctc-pad-y) var(--ctc-pad-x) !important;
  line-height: 1.3 !important;
  min-height: var(--ctc-min-h);
}

/* Inputs/textarea dentro de wrapper (otros campos de Woo) */
.float-checkout .woocommerce-checkout .form-row .woocommerce-input-wrapper .input-text,
.float-checkout .woocommerce-checkout .form-row .woocommerce-input-wrapper textarea{
  padding: var(--ctc-pad-y) var(--ctc-pad-x) !important;
  line-height: 1.3 !important;
  min-height: var(--ctc-min-h);
}







/* ARREGLO TAMAÑO DE IMAGENES EN PÁGINA NUESTROS PRODUCTOS DENTRO PESTAÑAS LOOP GRID */
/* =========================================
   LOOP GRID - Un solo control de tamaño
   Clase: loop-img
   ========================================= */

.loop-img{
  --img-box: 250px; /* 👈 SOLO CAMBIA ESTE VALOR */
}

/* Caja */
.loop-img .elementor-widget-theme-post-featured-image a{
  display: block;
  width: 100%;
  height: var(--img-box);
  overflow: hidden;
}

/* Imagen (sin deformar) */
.loop-img .elementor-widget-theme-post-featured-image img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* Responsive opcional (si quieres que baje solo) */
@media (max-width: 1024px){
  .loop-img{ --img-box: 280px; }
}
@media (max-width: 767px){
  .loop-img{ --img-box: 240px; }
}








/* LINEA AMARILLA PARA WIDGET PESTAÑAS EN NUESTROS PRODUCTOS Y COMO TEÑIR */
/* =========================================
   CITOCOL – Franja amarilla full width detrás de tabs
   Clase en el widget: linea-amarilla
   (sin 100vw / sin scroll horizontal)
   ========================================= */
@media (min-width: 1024px){
	.linea-amarilla .e-n-tabs-heading{
  	position: relative;
  	z-index: 1;
 	background: transparent !important;
	}

	.linea-amarilla .e-n-tabs-heading::before{
  	content: "";
 	position: absolute;
  	top: 0;
  	bottom: 0;         /* misma altura exacta del header de pestañas */
 	left: -9999px;     /* se estira a todo el ancho sin usar vw */
  	right: -10px;
  	background: #F7A200;
  	z-index: -1;       /* queda detrás del texto/botones */
	width: 1000%;
	}
}
/* =========================================
   CITOCOL – Ocultar franja amarilla en responsive
   ========================================= */

/* Tablet y móvil */
/*@media (max-width: 1024px){
  .linea-amarilla .e-n-tabs-heading::before{
    display: none;
  }
}*/



/* LINEA AMARILLA PARA WIDGET PESTAÑAS EN NUESTROS PRODUCTOS Y COMO TEÑIR */
/* =========================================
   CITOCOL – Franja amarilla full width detrás de tabs
   Clase en el widget: linea-amarilla
   (sin 100vw / sin scroll horizontal)
   ========================================= */
@media (min-width: 1024px){
.linea-amarilla2 .e-n-tabs-heading{
  position: relative;
  z-index: 1;
  background: transparent !important;
}

.linea-amarilla2 .e-n-tabs-heading::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;         /* misma altura exacta del header de pestañas */
  left: -9999px;     /* se estira a todo el ancho sin usar vw */
  right: -160px;
  background: #F7A200 !important;
  z-index: -1;       /* queda detrás del texto/botones */
  width: 1000%;
}
}


/* =========================================
   CITOCOL – Ocultar franja amarilla en responsive
   ========================================= */

/* Tablet y móvil */
/*@media (max-width: 1024px){
  .linea-amarilla2 .e-n-tabs-heading::before{
    display: none;
  }
}*/





/* OCULTAR NOMBRES DEL FOOTER DE WIDGET GALLERY EN PÁGINA SOBRE NOSOTROS E HISTORIAL FOTOGRÁFICO */
/* Elementor Lightbox: ocultar el título/descripcion en todo el sitio */
.elementor-lightbox .elementor-slideshow__footer,
.elementor-lightbox .elementor-slideshow__title,
.elementor-lightbox .elementor-slideshow__caption,
.elementor-lightbox .elementor-slideshow__description{
  display: none !important;
}





/* OCULTAR BLOQUE DE PRODUCTOS RELACIONADOS EN SINGLE PRODUCT SI NO HAY QUE MOSTRAR, INTERNA PRODUCTOS */
/* Ocultar bloque de relacionados SOLO cuando esté vacío (marcado por JS) */
.rel-prod.is-empty{
  display: none !important;
}





/* CENTRAR INFORMACIÓN DEL CARRITO SIDE BAR */
/* =========================================
   Sidebar mini cart (solo este widget)
   Clase en Elementor: cart-side
   Centrar verticalmente info vs X (remove)
   ========================================= */

.cart-side .widget_shopping_cart_content .elementor-menu-cart__product{
 
/* imagen | info | X */
  grid-template-rows: 1fr auto auto 1fr;    /* centra verticalmente name+price */
  /*column-gap: 12px;*/
  align-items: center;
  display: grid; /* asegura que grid-column/grid-row siempre funcionen */
  grid-template-columns: 60px minmax(0,1fr) 30px; /* evita que la X se salga */
}


/* Colocación en grid */
.cart-side .widget_shopping_cart_content .elementor-menu-cart__product-image{
  grid-column: 1;
  grid-row: 1 / -1; /* ocupa toda la altura del item */
  align-self: center;
}

.cart-side .widget_shopping_cart_content .elementor-menu-cart__product-name{
  grid-column: 2;
  grid-row: 2;      /* centrado por las filas 1fr arriba y abajo */
  margin: 0 !important;
}

.cart-side .widget_shopping_cart_content .elementor-menu-cart__product-price{
  grid-column: 2;
  grid-row: 3;
  margin: 0 !important;
}





/* OCULTAR NOTIFICACIÓN DE ENVÍO DE CORREO AL RECUPERAR CONTRASEÑA */
/* SOLO en el widget/caja con clase .pw-hide
   Oculta el aviso y el texto del reset password */
.pw-hide .woocommerce > .woocommerce-message{
  display: none !important;
}





/* Ocultar info transferencia página de gracias */
.info-solo-transferencia {
    display: none;
}

body.pago-con-bacs .info-solo-transferencia {
    display: block !important;
}