/* Transparent Header */
.scrolling .brxe-container.header__container {
  background: var(--neutral-light-trans-80);
  transition: all ease-in-out .5s;
  box-shadow: 0px 0px 0.938rem 0.188rem rgba(0, 0, 0, 0.05);
  border: 1px solid rgb(0 0 0 / 5%);
}

.header__container {
  padding-left:0;
}

.scrolling .brxe-container.header__container {
  padding-left: var(--space-xs);
}

@media (max-width: 1100px) {
  
  .header__container {
  background: none;
  padding-right:0;
}
  .scrolling .brxe-container.header__container {
  background: var(--neutral-light);
  padding-right:var(--space-xs);
}
}

.brxe-container.header__container {
  transition: all ease-in-out .2s;
}

/* Logos darkmode */
.logo--alt,
.favicon--alt {display: none;}

.color-scheme--alt .logo--main,
.color-scheme--alt .favicon--main {
  display: none;
}

.color-scheme--alt .logo--alt,
.color-scheme--alt .favicon--alt {
  display: flex;
}

/* Elimina el espacio inferior en los enlaces que envuelven SVGs */
.brxe-svg a, 
.brxe-image a {
    line-height: 0;;
}

/*******
CUSTOM ELEMENTS CLASES
*********/

/* Clicable cards */
.clicable-card,
.translate-effect {
    position:relative;
}

.clicable-mmitem {
    position:relative;
}

.clicable-card:focus-within,
.clicable-mmitem:focus-within {
    box-shadow: 0 0 0 var(--focus-width) var(--focus-color);
}

.clicable-card:focus-within :focus,
.clicable-mmitem:focus-within :focus{
    box-shadow: none;
    outline:none;
}

.clicable-card h2 a::before,
.clicable-card h3 a::before,
.clicable-card a::before,
.clicable-mmitem a::before {
    content: '';
    position:absolute;
    inset:0;
    z-index:1;
}


/* Portfolio */

.work-card__tags {
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
  visibility: hidden;

  transition:
    transform 0.3s ease,
    opacity 0.15s ease 0.3s, /* Delay en la salida */
    visibility 0.3s;
  will-change: transform, opacity;

}

.clicable-card:hover .work-card__tags {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;

  transition:
    transform 0.3s ease,
    opacity 0.15s ease,
    visibility 0.3s;
}

/* === Muestra siempre los tags en móviles (<=767px) === */
@media screen and (max-width: 1024px) {
  .work-card__tags,
  .clicable-card:hover .work-card__tags {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    visibility: visible !important;
    transform: translate3d(0,0,0);
  }

}

.work-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.work-card:hover .work-card__media img {
  transform: scale(1.05) translateY(-1%);
}

.work-card__media {
  overflow: clip; /* Safari 15+ entiende mejor esto que hidden en animaciones */
  transform: translateZ(0); /* fuerza la creación de una capa nueva */
  -webkit-mask-image: -webkit-radial-gradient(white, black); /* parche safari */
  will-change: transform;
}

/***** GSAP SuperCTA BUTTON *******/
/* Defaults de color para cuando no hay contexto bg--* */
.btn-circle[class*="btn--"]:not(.btn--none) {
  --btn-background: var(--primary);
  --btn-text-color: var(--primary-ultra-light);
  --btn-background-hover: var(--primary-hover);
  --btn-text-color-hover: var(--primary-ultra-light);
  --btn-border-color: var(--primary);
  --btn-border-color-hover: var(--primary-hover);
}

/* Solo lo que ACSS no cubre o necesita el efecto GSAP */
.btn-circle {
  overflow: hidden;
  position: relative;
}

.btn-text {
  position: relative;
  text-align: center;
  transition: color 50ms cubic-bezier(0.77, 0, 0.175, 1);
}

.btn-circle:hover .btn-text {
  transition: color 0.15s cubic-bezier(0.77, 0, 0.175, 1);
  color: var(--white);
}

.hover-circle {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: scale(0);
  transform-origin: 0 0;
  will-change: transform;
}

.hover-circle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  background-color: var(--neutral);
  border-radius: 50%;
  width: 170%;
  aspect-ratio: 1/1;
  display: block;
  pointer-events: none;
}

/* SuperCTA — Mobile */
@media (max-width: 768px) {
  .btn-circle {
    width: 100%;
    --btn-padding-block: 0.75em;
    --btn-padding-inline: 1.5em;
  }
}

/* Cursor GSAP */ 
#custom-cursor {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: var(--primary); /* Fondo blanco visible */
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  transition: background 0.3s ease;
}

.cursor-icon {
  width: 50px;
  height: 50px;
  color: var(--primary-ultra-light);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Hola Hero home */
@keyframes waving {
  0% { transform: rotate(0deg); }
  10% { transform: rotate(14deg); }
  20% { transform: rotate(-8deg); }
  30% { transform: rotate(14deg); }
  40% { transform: rotate(-4deg); }
  50% { transform: rotate(10deg); }
  60% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

.animate-waving {
  display: inline-block;
  transform-origin: 70% 70%;
  animation: waving 2s linear infinite;
}

/* Animaciones puro CSS Home services */
.service-image,
.service-item-description {
 transition: all 0.4s ease;
}

.service-item:hover img {
  width: 120px;
  opacity: 1;
  margin-right: var(--space-m) ;
}

.service-item:hover .service-item-title a {
  color: var(--text-light);
} 

.service-item:hover .service-item-description {
  opacity: 1;
}

/* Títulos de las secciones */
span.heading-prefix {
  align-items: center;
  display: inline-flex;
  gap: calc(var(--space-xs)*.7);
}

span.heading-prefix-special {
  align-items: center;
  display: inline-flex;
  gap: calc(var(--space-xs)*.7);
}

.heading-prefix-special::before {
  content: "·";
  font-size: var(--text-xxl);   
  margin-right: var(--space-xxs);
  color: var(--color-dark);
  font-weight: 700;
  line-height: 1;
  align-items: center;
}

.heading-prefix::before {
  content: "·";
  font-size: var(--text-xxl);   
  margin-right: var(--space-xxs);
  color: var(--color-dark);
  font-weight: 700;
  line-height: 1;
  align-items: center;
}

.heading-prefix::after,
.blog-lectura {
  font-size: var(--text-m);
  font-weight: 400;
  color: var(--color-dark);
  letter-spacing: 0;  
  line-height: 1em;
  margin-right: var(--space-xl);
}

.heading-prefix-website::after {
  content: "Web profesional";
}

.heading-prefix-tercnology::after {
  content: "Tecnología";
}

.heading-prefix-branding::after {
  content: "Marca";
}

.heading-prefix-marketing::after {
  content: "Marketing";
}

.heading-prefix-featuredservs::after {
  content: "Servicios";
}

.heading-prefix-featuredwork::after {
  content: "Nuestro trabajo";
}

.heading-prefix-faq::after {
  content: "FAQ";
}

.heading-prefix-featuredcontact::after {
  content: "Contacto";
}

.heading-prefix-socialproof::after {
  content: "Proyectos en marcha";
}

.heading-prefix-who::after {
  content: "Nosotros";
}

.heading-prefix-about-intro::after {
  content: "Especialistas";
}

.heading-prefix-partner::after {
  content: "Tu partner digital";
}

.heading-prefix-blog::after {
  content: "Artículos";
}

.heading-prefix-rafa::after {
  content: "Hola, soy Rafa Arjonilla";
}

.heading-prefix-beneficios::after {
  content: "Beneficios";
}

.heading-prefix-testimonios::after {
  content: "Testimonios";
}

.heading-prefix-howto::after {
  content: "Cómo lo hacemos";
}

.heading-prefix-howtowork::after {
  content: "Cómo trabajamos";
}

.heading-prefix-steptwo::after {
  content: "Paso 2";
}

.heading-prefix-stepthree::after {
  content: "Paso 3";
}

/* Contacto */
/* El H1 */
.hero-heading {
  display: inline-flex;
  align-items: center;
  gap: .25em;
  line-height: 1;
}

/* Círculo */
.hero-bullet {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: .7em;
  height: .7em;
  border-radius: 50%;
  background: var(--primary);
  margin-left: .2em;
  vertical-align:middle;
}

.steps-bullet {
  width: 5em;
  height: 5em;
}

.hero-bullet .icon-arrow {
  color: var(--primary-ultra-light);
  font-size: 0.35em; /* Ajusta el tamaño del icono */
  transform: rotate(45deg); /* Apunta diagonal derecha-abajo */
  transition: transform .25s ease;
}

.lix {
  color: var(--primary-ultra-light);
}

.hero-bullet:hover .icon-arrow {
  transform: rotate(90deg); /* Rota para apuntar vertical hacia abajo */
}

.hero-bullet:hover .icon-arrow.step-2{
  transform: rotate(0deg); /* Apunta diagonal derecha-abajo */
}

.steps-bullet {
  width: 5em;
  height: 5em;
  margin-left: 0;
}

@media (max-width: 1100px) {
.icon-arrow {
  transform: rotate(90deg); /* Apunta diagonal derecha-abajo */
  transition: transform .25s ease;
}

.icon-arrow.step-2 {
  transform: rotate(0deg); /* Apunta diagonal derecha-abajo */
  transition: transform .25s ease;
}}

/* Filtros portfolio */

span.brx-option-text.bricks-button {
    padding: 7px;
}

span.brx-option-count {
    font-size: var(--text-m);
    display: contents;
}

.service-item--s:hover .service-item-icon {
  display: block;;
}
.pre-title  {
  font-weight: 400;
  padding-right:var(--space-s);
  opacity:.5;
}

/**** FORZAR DARK MODE CUANDO HAY UNA EXLUSION */
/* Fondo y color del bloque de redes sociales */
.color-scheme--alt .force-darkmode {
  background-color: var(--black) !important;
}

.color-scheme--alt .force-darkmode[data-inverted-radius-1-position]::before {
  box-shadow: 16px -16px 0 16px var(--black) !important;
}

/* Solo el círculo azul de fondo */
.accordion-title .icon {
  width: 2.5em !important;
  height: 2.5em !important;
  min-width: 2.5em !important;
  min-height: 2.5em !important;
  border-radius: 50%;
  background: var(--primary) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--primary-ultra-light) !important;
  position: relative !important;
  aspect-ratio: 1;
  padding: .5em;
}

/* Forzar tamaño igual para ambos iconos */
.accordion-title .ti-arrow-down:before,
.accordion-title .ti-arrow-top-right:before {
  font-size: 1rem !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* Ocultar el icono correcto según el estado */
.accordion-item:not(.brx-open) .ti-arrow-down {
  display: none !important;
}

.accordion-item.brx-open .ti-arrow-top-right {
  display: none !important;
}

.accordion-title .title {
    padding-right: var(--space-s);
}

:where(.brxe-accordion) .accordion-title {
    align-items: flex-start;
}

/* Enlaces con bakground*/

/* Solo enlaces dentro de etiquetas <p> que estén en widgets de texto de Bricks */
/* Selecciona enlaces dentro de cualquier contenedor de texto de Bricks que use párrafos */
/* Selector infalible para Bricks + ACSS */
.brxe-text-basic p a:not([class*="btn"]), 
.brxe-rich-text p a:not([class*="btn"]),
[class*="brxe-text"] p a:not([class*="btn"]),
.brxe-post-content p a:not([class*="btn"]),
.accordion-content-wrapper p a:not([class*="btn"]) {
    background-color: var(--bg-light) !important;
    border-radius: 5px;
    padding: 0.25rem;
    display: inline; /* Evita que el padding rompa la línea */
}

.brxe-text-basic p a:not([class*="btn"]):hover, 
.brxe-rich-text p a:not([class*="btn"]):hover,
[class*="brxe-text"] p a:not([class*="btn"]):hover,
.brxe-post-content p a:not([class*="btn"]):hover,
.accordion-content-wrapper p a:not([class*="btn"]):hover {
    background-color: var(--accent) !important;
    color: var(--accent-ultra-dark);
}

/*Logos highleve en color alt */
/* Oculta la imagen del modo oscuro por defecto */
.show-on-dark {
    display: none !important;
}

/* Oculta la imagen del modo claro cuando está activo el modo oscuro (color-scheme--alt) */
.color-scheme--alt .show-on-light {
    display: none !important;
}

/* Muestra la imagen del modo oscuro cuando está activo el modo oscuro (color-scheme--alt) */
.color-scheme--alt .show-on-dark {
    display: block !important; /* Usa 'block' o 'inline-block' según tu diseño */
}

/* Fix megamenu in mobile */
 #brxe-xaalpm.open > .brx-dropdown-content {
        transform: translateY(20px) !important;
    }
/* Solo para móviles: evita que el megamenú se desplace sobre otros links */
@media (max-width: 1100px) { /* Ajusta a tu breakpoint de móvil */
    #brxe-xaalpm.open > .brx-dropdown-content {
        transform: translateY(0) !important;
    }
}

/* Fix icon box gap */
.brxe-icon-box .content {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

/* Marquee sobre nosotros */
#sobre-nosotros-hero .mq-logo img {
  border-radius: var(--radius);
}