/* main.css — extraído de index.html */

/* --- Webflow: outline none --- */
.wf-force-outline-none[tabindex="-1"]:focus{outline:none;}

/* Estados iniciales IX2 / data-w-id eliminados del HTML; la visibilidad la controlan reglas por componente más abajo. */

/* --- Layout: menu, fixed, flip --- */
* {
  -webkit-font-smoothing: antialiased;
}

/* Anclas: offset bajo la barra al hacer scroll (p. ej. #projects, #about-page-blocks) */
html {
  scroll-padding-top: 5.5rem;
}

.menu_link {
	pointer-events: none;  
}
  
.fixed {
  position: fixed;
  top: 0;
  left: 0;
}
  
.active-flip-item {z-index: 2;}
  

/* --- About import: card stack --- */
/* attrs: id="about-import-card-stack" */
	.card-container-inner {
  	position: relative;
  }
  .card-container-inner .card {
  	left: 0;
  	position: absolute;
    top: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    -webkit-transform-origin: top;
    transform-origin: top;
  }
  .card-container-inner .card:nth-child(1) {
  	position: relative;
    z-index: 10;
    -webkit-transform: translateY(0px) scale(1);
    transform: scale(1);
    opacity: 1;
  }
  .card-container-inner .card:nth-child(2) {
  	position: absolute;
    transform: translateY(-15px) scale(0.97);
    z-index: 9;
    opacity: 0.8;
  }
  .card-container-inner .card:nth-child(3) {
  	position: absolute;
    transform: translateY(-30px) scale(0.94);
    z-index: 8;
    opacity: 0.6;
  }
  .card-container-inner .card:nth-child(4) {
  	position: absolute;
    transform: translateY(-45px) scale(0.91);
    z-index: 7;
    opacity: 0.4;
  }
  .card-container-inner .card:nth-child(5) {
  	position: absolute;
    transform: translateY(-60px) scale(0.88);
    z-index: 6;
    opacity: 0.2;
  }

/* --- Global embed: tipografía y utilidades --- */
/* START: Font size settings (customize them at https://wizardry-technique.webflow.io/)*/
body {
 font-size: 1.1111111111111112vw;
}

/* Select Color */
::selection {color: #ec5c29; background: #202126;}

/* Max Font Size */
@media screen and (min-width:1440px) {
 body {font-size: 16px;}
}
/* Container Max Width */
.container {
  max-width: 1440px;
}
/* Min Font Size */
@media screen and (max-width:991px) {
 body {font-size: 11.011111111111111px;}
}
/* END: Font size settings */


.dsg-table>:last-child {
	border-bottom: 0px;
}

/* Prevents hover states and clicks on elements */
.non-clickable {
	pointer-events: none;
}

/* Enables hover states and clicks on elements */
.clickable {
  pointer-events: auto;
}

/* Aspect ratios for image wrappers */
.aspect-ratio-1-1 {
	aspect-ratio:  1 / 1;
}
.aspect-ratio-2-1 {
	aspect-ratio:  2 / 1;
}
.aspect-ratio-4-3 {
	aspect-ratio:  4 / 3;
}
.aspect-ratio-16-9 {
	aspect-ratio:  16 / 9;
}
.aspect-ratio-3-4 {
	aspect-ratio:  3 / 4;
}

/* Reset for links and buttons */
a {
	color: inherit;
	text-decoration: inherit;
	font-size: inherit;
}

/* Removes top margin on first element in rich text fields*/
.w-richtext>:first-child {
	margin-top: 0;
}

/* Removes bottom margin on last element in rich text fields*/
.w-richtext>:last-child, .w-richtext ol li:last-child, .w-richtext ul li:last-child {
	margin-bottom: 0;
}

/*Cuts text off after 3 lines and adds "..." */
.is-txt-cut-3lines {
	overflow: hidden;
	display: -webkit-box;
  -webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

/*Cuts text off after 2 lines and adds "..." */
.is-txt-cut-2lines {
	overflow: hidden;
	display: -webkit-box;
  -webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
  }

.project_link {
	isolation: isolate;
}

/* --- Nav: texto rotatorio --- */
.rotatingtext {
	transform: translate3d(0, 16px, 0);
	animation: rotate 10s infinite;
	transition-timing-function: cubic-bezier(0.2,0.5,0.3,1)
}

.rotatingtext:nth-of-type(2) {
  animation-delay: 2.5s;
}

.rotatingtext:nth-of-type(3) {
  animation-delay: 5s;
}

.rotatingtext:nth-of-type(4) {
  animation-delay: 7.5s;
}

@keyframes rotate {
/* Text is positioned below the wrap */
0% {
		transform: translate3d(0, 16px, 0);
  }

/* Move text up and make it visible */
2.5% {
		transform: translate3d(0, 0, 0);
  } 

/* Between 2.5% and 25%, nothing changes (text is visible) */
25% {
		transform: translate3d(0, 0, 0);
  }  

/* Move text up and out of the wrap */
27.5% {
    transform: translate3d(0, -16px, 0);
  }

/* Between 27.5% and 99%, nothing changes (text is invisible) */
99.9999% {
    transform: translate3d(0, -16px, 0);
  }

/* Move text to it's original position (loop starts over) */
100% {
    transform: translate3d(0, 16px, 0);
  }  
}

/* --- Logo marquee: scroll keyframes --- */
  @keyframes scroll {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(calc(-100%  - 1rem));
    }
  }

  .scroll {
    animation: scroll 30s linear infinite;
  }

  .reverse {
    animation-direction: reverse;
  }

  

/* --- Retainer card: hover/edición --- */
/* Project CSS */
.item:hover .item_edit-icon {
	opacity: 1;
}
.item.editing :is(.item_draggable, .item_edit) {
	pointer-events: none;
  opacity: 0;
}
.item.editing {
	border: solid 1px #4e5e5f;
}
.item.editing:hover {
	background-color: #;
}
.item:not(.editing):active {
  background-color: #;
  transform: rotate(0.5deg);
}

/* --- Stories tabs: borde imagen --- */
.tab-image {
 border-top-left-radius: 1em;
  border-top-right-radius: 1em;
}

/* --- Nav: icono hamburguesa estático (sin Lottie / IX2 en el botón) --- */
.menu-burger-static {
  flex-direction: column;
  gap: 0.35rem;
  justify-content: center;
  align-items: center;
}
.menu-burger-static .menu-burger-line {
  display: block;
  width: 1.5rem;
  height: 2px;
  background-color: #333;
  border-radius: 1px;
}

/* --- Hero CTA: icono flecha solo en hover --- */
.btn-primary-blk .btn-icon-wrap {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-6px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
}
.btn-primary-blk:hover .btn-icon-wrap,
.btn-primary-blk:focus-within .btn-icon-wrap {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* --- Home services (grid 4+4+4): extras en hover; subtítulos visibles en las 4 cards --- */
@media (min-width: 992px) {
  .is-pad-b-24.is-mb-4 .card01.is-consulting:not(:hover):not(:focus-within) .comment-block-outline,
  .is-pad-b-24.is-mb-4 .card01.is-consulting:not(:hover):not(:focus-within) .comment-form-block,
  .is-pad-b-24.is-mb-4 .card01.is-consulting:not(:hover):not(:focus-within) .align-left-img {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none;
  }

  .is-pad-b-24.is-mb-4 .card01.is-design:not(:hover):not(:focus-within) .design-element {
    opacity: 0 !important;
    pointer-events: none;
  }

  /* Dev: decoraciones (outline / título bloque) y demo UI solo con hover */
  main.main-wrapper .is-pad-b-24.is-mb-4 .card01.is-dev:not(:hover):not(:focus-within) .div-block-outline,
  main.main-wrapper .is-pad-b-24.is-mb-4 .card01.is-dev:not(:hover):not(:focus-within) .div-block-title {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none;
  }

  main.main-wrapper .is-pad-b-24.is-mb-4 .card01.is-dev:not(:hover):not(:focus-within) .ui-bar-wrap {
    display: none !important;
  }

  main.main-wrapper .is-pad-b-24.is-mb-4 .card01.is-dev:hover .ui-bar-wrap,
  main.main-wrapper .is-pad-b-24.is-mb-4 .card01.is-dev:focus-within .ui-bar-wrap {
    display: block !important;
  }

  .is-pad-b-24.is-mb-4 .card01 .icon.card-icon {
    transition: color 0.25s ease;
  }
  .is-pad-b-24.is-mb-4 .card01:hover .icon.card-icon,
  .is-pad-b-24.is-mb-4 .card01:focus-within .icon.card-icon {
    color: #ec5c29;
  }
}

/*
 * Retainer: demo .retainer-table oculta por defecto; solo se muestra con hover real
 * en puntero fino (sin :focus-within: el inspector/teclado abría la capa sin pasar el ratón).
 * En táctil (hover: none) queda oculta: evita “hover pegado” y capas que reaparecen solas.
 */
#service-card-support.card01.is-retainer .retainer-table {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  /* no tocar transform: el export usa rotate(-2deg) en .retainer-table (la “curva” de la captura) */
}

@media (hover: hover) and (pointer: fine) {
  #service-card-support.card01.is-retainer:hover .retainer-table {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* Transiciones al revelar capas de consulting */
.is-pad-b-24.is-mb-4 .card01.is-consulting .comment-block-outline,
.is-pad-b-24.is-mb-4 .card01.is-consulting .comment-form-block,
.is-pad-b-24.is-mb-4 .card01.is-consulting .align-left-img {
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

.is-pad-b-24.is-mb-4 .card01.is-design .design-element {
  transition: opacity 0.28s ease;
}

.is-pad-b-24.is-mb-4 .card01.is-dev .div-block-outline,
.is-pad-b-24.is-mb-4 .card01.is-dev .div-block-title {
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

/* Card Design: cursor SVG sigue al puntero (main.js añade .is-design-pointer) */
.is-pad-b-24.is-mb-4 .card01.is-design {
  position: relative;
}
.is-pad-b-24.is-mb-4 .card01.is-design .cursor-wrap {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  pointer-events: none;
  will-change: transform;
  opacity: 0;
  transition: opacity 0.2s ease;
}
@media (pointer: fine) {
  .is-pad-b-24.is-mb-4 .card01.is-design.is-design-pointer {
    cursor: none;
  }
  .is-pad-b-24.is-mb-4 .card01.is-design.is-design-pointer .cursor-wrap {
    opacity: 1;
  }
}
@media (pointer: coarse) {
  .is-pad-b-24.is-mb-4 .card01.is-design .cursor-wrap {
    display: none;
  }
}

/* About hero: punto de partida suave antes del GSAP en main.js */
#about-page-blocks .about-hero-img {
  opacity: 0;
}

/* --- Tabs Webflow: refuerzo visibilidad de paneles (sin runtime Webflow) --- */
.w-tab-content > .w-tab-pane:not(.w--tab-active) {
  display: none !important;
}
.w-tab-content > .w-tab-pane.w--tab-active {
  display: block !important;
}

/* --- FAQ acordeón: transición de altura (main.js controla height) --- */
.accordion-item {
  cursor: pointer;
}
.accordion-item .accordion-item-content {
  cursor: auto;
}
.accordion-item-trigger {
  cursor: inherit;
}
.accordion-item-content {
  overflow: hidden;
  transition: height 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}