/* =========================================================
   FRAGUA — Estilos a medida
   Base técnica: color de fondo dinámico + transición suave
   ========================================================= */

/* Paleta del proyecto (para referencia rápida) */
:root {
  --fragua-oscuro: #1e1e1e;
  --fragua-claro: #ededed;
}

/* Fondo global del sitio. Cambia de color según el scroll
   (lo controla fragua.js). La transición suave vive aquí. */
body {
  background-color: var(--fragua-oscuro); /* color inicial = Hero */
  transition: background-color 0.6s ease;
}

/* IMPORTANTE para el efecto de color:
   Las secciones de Elementor deben quedar SIN color de fondo
   (transparentes) para que se vea el fondo global que cambia.
   Si una sección lleva su propio fondo, se verá un corte duro. */

/* Respetar a usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
  body {
    transition: none;
  }
}

/* =========================================================
   ACORDEÓN HORIZONTAL (dos columnas, solo una abierta a la vez)
   - .acordeon         → contenedor general (ancho de página)
   - .acordeon-item    → cada columna. El PRIMERO debe llevar ADEMÁS
                         "is-open" para quedar abierto por defecto.
   - .acordeon-titulo  → título (abre/cierra)
   - .acordeon-flecha  → flecha (abre/cierra; se oculta al estar abierto)
   - .acordeon-oculto  → lo que se revela al abrir (vector + párrafo 2).
                         Se pone DIRECTAMENTE sobre cada elemento.
   ========================================================= */
.acordeon {
  display: flex;
  align-items: stretch;
  min-height: 560px; /* altura fija para que no varíe: ajustar según el contenido */
}
.acordeon-item {
  position: relative;
  flex-grow: 3.5 !important;                  /* columna cerrada = 35% */
  flex-shrink: 1 !important;
  flex-basis: 0% !important;
  min-width: 0 !important;
  overflow: hidden !important;  /* el !important es clave: Elementor lo pisa con "visible" y el botón oculto desborda */
  transition: flex-grow 0.6s cubic-bezier(0.65, 0, 0.35, 1) !important;
}
.acordeon-item.is-open {
  flex-grow: 6.5 !important;                  /* columna abierta = 65% */
}

/* Contenido que se revela al abrir (vector + párrafo 2) */
.acordeon-oculto {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.acordeon-item.is-open .acordeon-oculto {
  opacity: 1;
  pointer-events: auto;
}

.acordeon-titulo {
  cursor: pointer;
}
.acordeon-flecha {
  position: absolute;
  top: 20px;                                  /* distancia desde arriba (ajustar) */
  cursor: pointer;
  transition: opacity 0.3s ease;
}
/* Al estar abierto, la flecha desaparece (en el cerrado se ve) */
.acordeon-item.is-open .acordeon-flecha {
  opacity: 0;
  pointer-events: none;
}

/* =========================================================
   MENÚ FLOTANTE (fijo arriba a la izquierda)
   - .menu-fragua   → contenedor general (la barra completa)
   - .menu-enlaces  → barra translúcida con desenfoque (glassmorphism)
   ========================================================= */
.menu-fragua {
  position: fixed !important;
  top: 24px !important;   /* "aire" arriba — ajustar */
  left: 24px !important;  /* "aire" a la izquierda — ajustar */
  z-index: 9999 !important;
  display: flex;
  align-items: center;
  gap: 12px;      /* separación entre logo, barra y botón */
}
.menu-enlaces {
  display: flex;
  align-items: center;
  gap: 24px;      /* separación entre las palabras del menú */
  padding: 12px 28px;
  background: rgba(255, 255, 255, 0.12); /* fondo translúcido — ajustar opacidad */
  backdrop-filter: blur(14px);            /* desenfoque de lo que hay detrás */
  -webkit-backdrop-filter: blur(14px);
  border-radius: 999px;                   /* forma de píldora — ajustar */
}

/* =========================================================
   OCULTAR HEADER/FOOTER POR DEFECTO DEL TEMA HELLO
   (el sitio está 100% hecho en Elementor, así que el header
   y footer que trae el tema por defecto no se usan)
   ========================================================= */
#site-header,
.site-header {
  display: none !important;
}
#site-footer,
.site-footer {
  display: none !important;
}

/* =========================================================
   RECORRIDO HORIZONTAL (contadores → identidad)
   - .sec-horizontal       → contenedor que recorta lo que
                             sobresale a los lados, SIN romper el
                             sticky de la sección identidad.
   - .sec-horizontal-track → pista flex que pone "contadores" e
                             "identidad" una al lado de la otra.
   El movimiento horizontal lo hace fragua.js (GSAP + pin).
   ========================================================= */
.sec-horizontal {
  clip-path: inset(0) !important;   /* recorta lo que sobresale SIN crear scroll container: así respeta el sticky */
}
.sec-horizontal-track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
}
.sec-horizontal-track > .e-con {
  flex: 0 0 100vw !important;
  width: 100vw !important;
  min-width: 100vw !important;
  max-width: 100vw !important;
}

/* =========================================================
   TÍTULO FIJO ABAJO EN "DISEÑO DE IDENTIDAD"
   El bloque de textos de la columna izquierda se queda pegado al
   borde inferior de la pantalla mientras la lista de proyectos
   sube. Lo maneja fragua.js con un clon en "position: fixed"
   (nativo, sin retraso). Aquí no hace falta CSS extra.
   ========================================================= */

/* =========================================================
   CARRUSEL DE TESTIMONIOS — barras de progreso
   Una barrita gris por testimonio; la activa se llena de
   fucsia (#ff0072) durante los 10 segundos antes de avanzar.
   ========================================================= */
.testimonios-barras {
  display: inline-flex;
  align-items: center;
  gap: 8px;               /* separación entre barritas — ajustar */
  vertical-align: middle;
  margin-left: 10px;      /* aire respecto a la flecha derecha — ajustar */
}
.testimonios-barra {
  position: relative;
  width: 28px;            /* largo de cada barrita — ajustar */
  height: 4px;            /* grosor — ajustar */
  border-radius: 999px;
  background: #d6d6d6;    /* gris (vacío) sobre el fondo claro #ededed */
  overflow: hidden;
}
.testimonios-relleno {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0%;              /* lo va llenando fragua.js */
  background: #ff0072;    /* fucsia de la marca */
  border-radius: 999px;
}

/* =========================================================
   MENÚ MÓVIL (hamburguesa)
   En celular el menú se reduce a logo + botón de hamburguesa;
   al tocarla se abre un panel a pantalla completa.
   ========================================================= */
.menu-hamburguesa {
  display: none;               /* solo aparece en celular */
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 13px;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.menu-hamburguesa span {
  display: block;
  height: 2px;
  width: 100%;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.menu-hamburguesa.abierto span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-hamburguesa.abierto span:nth-child(2) { opacity: 0; }
.menu-hamburguesa.abierto span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.menu-panel {
  position: fixed;
  inset: 0;
  z-index: 9997;               /* debajo del logo + hamburguesa (9999) */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 44px;
  padding: 80px 32px;
  background: rgba(30, 30, 30, 0.97);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.menu-panel.abierto {
  opacity: 1;
  visibility: visible;
}
.menu-panel-enlaces {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.menu-panel-link {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.15;
  color: #fff;
  text-decoration: none;
}
.menu-panel-contacto {
  display: inline-block;
  padding: 15px 30px;
  background: #ff0072;
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  font-weight: 600;
  font-size: 18px;
}

/* Bloquear el scroll de fondo con el menú abierto */
body.menu-cerrado {
  overflow: hidden;
}

/* ============ CELULAR (hasta 767px) ============ */
@media (max-width: 767px) {
  .menu-fragua {
    top: 16px !important;
    left: 16px !important;
    right: 16px !important;
    width: auto !important;   /* anula el "width:100%" de Elementor para que "right" sí funcione */
    align-items: center;
  }
  /* el logo se queda a la izquierda y empuja la hamburguesa a la derecha */
  .menu-fragua > :first-child {
    flex: 0 0 auto !important;
    width: auto !important;
    margin-right: auto !important;
  }
  .menu-fragua .menu-enlaces,
  .menu-fragua .elementor-widget-button {
    display: none !important;
  }
  .menu-hamburguesa {
    display: flex;
  }
}

/* ============ ACORDEÓN VERTICAL EN CELULAR ============ */
/* En pantallas chicas las dos columnas del acordeón se apilan
   una sobre otra, y las flechas apuntan arriba/abajo en vez de
   hacia los lados. */
@media (max-width: 767px) {
  .acordeon {
    flex-direction: column !important;
    min-height: 0 !important;
    gap: 16px !important;
  }
  .acordeon-item,
  .acordeon-item.is-open {
    flex-grow: 0 !important;      /* ya no se reparten el ancho 35/65 */
    flex-basis: auto !important;
    width: 100% !important;
    min-height: 0 !important;
  }
  /* El contenido "oculto" se colapsa de verdad: no deja hueco vacío */
  .acordeon-oculto {
    display: none !important;
  }
  .acordeon-item.is-open .acordeon-oculto {
    display: block !important;
  }
  /* Flechas: se fijan arriba a la derecha (junto al título) y
     apuntan hacia abajo. Solo se ven cuando la columna está cerrada;
     al abrirse desaparecen (lo maneja la regla base de .is-open). */
  .acordeon-flecha {
    position: absolute !important;
    top: 26px !important;
    right: 22px !important;
    left: auto !important;
    transform: rotate(90deg) !important;   /* apunta abajo */
    transition: transform 0.35s ease, opacity 0.3s ease;
  }
  /* La flecha de la segunda columna está dibujada en espejo
     (apunta a la izquierda), así que se gira al revés para que
     también termine apuntando hacia abajo. */
  .acordeon-item:nth-child(2) .acordeon-flecha {
    transform: rotate(-90deg) !important;
  }
}

/* =========================================================
   PILA 3D — capturas apiladas (portafolio, "Diseño Web")
   Varias capturas (PNG) del mismo alto y distinto ancho se
   acomodan una sobre otra, "flotando" en 3D. Al hacer clic en
   una, esa pasa al frente. El alto de la pila lo calcula el JS
   según la captura más ancha; acá solo se deja todo listo.
   ========================================================= */
.pila-3d {
  position: relative;
  width: 100%;
  perspective: 1500px;
  overflow: visible;
}
.pila-3d .pila-card {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  max-width: none !important;
  margin: 0 !important;
  display: block !important;
  overflow: visible !important;
  will-change: transform;
  cursor: pointer;
  z-index: 1;
  -webkit-tap-highlight-color: transparent;
  /* el ancho y el alto los pone fragua.js respetando la proporción */
}
.pila-3d .pila-card .elementor-widget-image,
.pila-3d .pila-card .elementor-widget-container {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
.pila-3d .pila-card img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  display: block;
  border-radius: 12px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.35), 0 12px 28px rgba(0, 0, 0, 0.22);
  user-select: none;
  -webkit-user-drag: none;
}

/* =========================================================
   AJUSTES 1.0.58 — fluidez y detalles
   ========================================================= */
/* La pista del recorrido y los títulos fijos se mueven con transform:
   capa propia en GPU (lo pone fragua.js; aquí queda documentado). */
.sec-horizontal-track {
  will-change: transform;
}
/* Menú de escritorio en UNA sola línea: Elementor le daba a la píldora un
   ancho fijo (35 %) y los cinco enlaces se partían en dos renglones. */
@media (min-width: 768px) {
  .menu-fragua .menu-enlaces {
    width: auto !important;
    flex: 0 0 auto !important;
    max-width: none !important;
  }
  .menu-fragua .menu-enlaces .e-n-menu-heading {
    flex-wrap: nowrap !important;
  }
  .menu-fragua .menu-enlaces .e-n-menu-title-text {
    white-space: nowrap;
  }
  /* Testimonios: aire arriba para que el título no quede debajo del menú fijo */
  .sec-testimonios {
    padding-top: 120px !important;
  }
}
/* Odómetro: alto de línea con margen para que los dígitos no se recorten
   (la tipografía tiene ascendentes altas y el widget traía line-height corto). */
.fragua-odometro,
.fragua-odometro .odometer-digit {
  line-height: 1.2 !important;
}