/*
 * proyecto.css — IUS Inter Nos. SOLO movimiento y comportamiento.
 *
 * Portado de web/src/styles/motion.css y del movimiento de index.css del
 * React. Ni un color ni un tamaño de diseño: eso vive en el panel de
 * Elementor y en los globales (y las formas sin control, en formas.php).
 * Una sola duración y una sola curva para toda la web (tokens.css).
 */

:root {
  --dur: 600ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --stagger: 80ms;
  --reveal-y: 24px;
  --reveal-x: 32px;
  --header-h: 124px;
  /* Iconos usados como máscara (el color lo pone la forma, con un global) */
  --ius-flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
  --ius-chevron-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --ius-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
@media (max-width: 767px) {
  :root { --dur: 400ms; --reveal-y: 14px; --reveal-x: 0px; --header-h: 72px; --reveal-y-lat: var(--reveal-y); }
}

/* ── Header fijo (Header.jsx: fixed + padding-top del body) ───────── */
html { scroll-padding-top: 96px; }
body { padding-top: var(--header-h); overflow-x: hidden; }
.elementor-location-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; }
.admin-bar .elementor-location-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .elementor-location-header { top: 46px; } }
body.ius-menu-abierto { overflow: hidden; }
.elementor-editor-active .elementor-location-header { position: relative; }
.elementor-editor-active { padding-top: 0; }

/* Una sola curva para las transiciones nativas de Elementor (botones, tarjetas, enlaces) */
.elementor-button, .e-con.ius-tarjeta-hover, .ius-tarjeta-hover, .elementor-icon,
.elementor-heading-title a, .elementor-icon-list-item a, .elementor-icon-list-text, .elementor-icon-list-icon svg,
.elementor-nav-menu a, .elementor-widget-image img { transition-timing-function: var(--ease); }
.e-con.ius-tarjeta-hover { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); }

/* ── Entradas al viewport (una sola vez). Las activa proyecto.js con
      html.js-motion; sin JS o con movimiento reducido todo queda visible. */
.js-motion [data-reveal] {
  opacity: 0;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), clip-path var(--dur) var(--ease);
  transition-delay: var(--d, 0ms);
}
.js-motion [data-reveal='up'] { transform: translate3d(0, var(--reveal-y), 0); }
.js-motion [data-reveal='left'] { transform: translate3d(calc(var(--reveal-x) * -1), var(--reveal-y-lat, 0), 0); }
.js-motion [data-reveal='right'] { transform: translate3d(var(--reveal-x), var(--reveal-y-lat, 0), 0); }
.js-motion [data-reveal='zoom'] { transform: scale(0.96); }
.js-motion [data-reveal='clip'] { opacity: 1; }
.js-motion [data-reveal='clip'] > * { clip-path: inset(100% 0 0 0); transition: clip-path var(--dur) var(--ease); transition-delay: var(--d, 0ms); }
.js-motion [data-reveal='clip'].is-in > * { clip-path: inset(0 0 0 0); }
.js-motion [data-reveal='lines'] { opacity: 1; }
.js-motion [data-reveal].is-in { opacity: 1; transform: none; }

/* Títulos por líneas (máscara) */
.ius-lineas .ln { display: block; }
.js-motion [data-reveal='lines'] .ln { overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.js-motion [data-reveal='lines'] .ln > span { display: inline-block; transform: translate3d(0, 110%, 0); transition: transform var(--dur) var(--ease); transition-delay: calc(var(--d, 0ms) + var(--i, 0) * var(--stagger)); }
.js-motion [data-reveal='lines'].is-in .ln > span { transform: none; }

/* Parallax sutil (solo escritorio, lo mueve proyecto.js) */
[data-parallax] { will-change: transform; }

/* ── Hero: cambio de diapositiva por máscara + título por líneas ─── */
.ius-hero-slide { clip-path: inset(0 0 0 100%); visibility: hidden; }
.ius-hero-slide.is-prev { clip-path: inset(0 0 0 0); visibility: visible; z-index: 1; }
.ius-hero-slide.is-active { clip-path: inset(0 0 0 0); visibility: visible; z-index: 2; transition: clip-path var(--dur) var(--ease); }
.ius-hero-slide .ius-hero-foto { scale: 1.06; transition: scale var(--dur) var(--ease); }
.ius-hero-slide.is-active .ius-hero-foto { scale: 1; }
.ius-hero-slide .ln { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.ius-hero-slide .ln > span { display: inline-block; }
.ius-hero-slide .ln > span, .ius-hero-slide .ius-hero-fade { transform: translate3d(0, 110%, 0); opacity: 0; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.ius-hero-slide .ius-hero-fade { transform: translate3d(0, var(--reveal-y), 0); }
.ius-hero.is-ready .ius-hero-slide.is-active .ln > span,
.ius-hero.is-ready .ius-hero-slide.is-active .ius-hero-fade { transform: none; opacity: 1; transition-delay: calc(var(--dur) * 0.4 + var(--i, 0) * var(--stagger)); }
.ius-hero-punto, .ius-hero-prev, .ius-hero-next { cursor: pointer; }
.ius-hero-punto .elementor-divider-separator { transition: width var(--dur) var(--ease), border-color var(--dur) var(--ease); }
/* Sin JS solo se ve la primera diapositiva */
.ius-hero:not(.is-montado) .ius-hero-slide:first-child { clip-path: none; visibility: visible; z-index: 2; }
.ius-hero:not(.is-montado) .ius-hero-slide:first-child .ln > span,
.ius-hero:not(.is-montado) .ius-hero-slide:first-child .ius-hero-fade { transform: none; opacity: 1; }

/* Contadores: los separadores crecen en vertical */
.js-motion .stat-sep { transform: scaleY(0); transition: transform var(--dur) var(--ease); transition-delay: var(--d, 0ms); }
.js-motion .is-in .stat-sep { transform: scaleY(1); }

/* ── Hover: tarjetas, imágenes, botones y enlaces ───────────────── */
.ius-zoom img, .ius-zoom-hover img { transition: transform var(--dur) var(--ease); }
.ius-tarjeta-hover:hover .ius-zoom img, .ius-tarjeta-hover:focus-within .ius-zoom img, .ius-zoom-hover:hover img { transform: scale(1.05); }
.ius-btn .elementor-button:active { transform: translateY(1px); }
.ius-btn .elementor-button-icon svg, .ius-enlace .elementor-button-icon svg,
.ius-enlace-falso .elementor-icon svg { transition: transform var(--dur) var(--ease); }
.ius-btn-flecha .elementor-button:hover .elementor-button-icon svg,
.ius-btn-flecha .elementor-button:focus-visible .elementor-button-icon svg,
.ius-enlace .elementor-button:hover .elementor-button-icon svg,
.ius-enlace .elementor-button:focus-visible .elementor-button-icon svg,
.ius-tarjeta-hover:hover .ius-enlace-falso .elementor-icon svg { transform: translateX(4px); }
.ius-enlace-atras .elementor-button:hover .elementor-button-icon svg,
.ius-enlace-atras .elementor-button:focus-visible .elementor-button-icon svg { transform: translateX(-4px); }
.ius-enlace .elementor-button-text, .ius-enlace-falso .elementor-heading-title,
.ius-subraya a, .ius-subraya .elementor-icon-list-text { transition: background-size var(--dur) var(--ease), color var(--dur) var(--ease); }
.ius-enlace .elementor-button:hover .elementor-button-text, .ius-enlace .elementor-button:focus-visible .elementor-button-text,
.ius-tarjeta-hover:hover .ius-enlace-falso .elementor-heading-title,
.ius-subraya a:hover, .ius-subraya a:focus-visible, .ius-subraya a[aria-current='page'],
.ius-subraya .elementor-icon-list-item a:hover .elementor-icon-list-text { background-size: 100% 1px; }
.ius-subraya .elementor-icon-list-item a:hover, .ius-subraya a:hover { text-decoration: none; }

/* ── Menú de escritorio: desplegable con fundido y chevron que gira ── */
.ius-menu .sub-menu { animation: ius-despliega var(--dur) var(--ease); }
@keyframes ius-despliega { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ius-menu .menu-item-has-children > a.elementor-item::after { transition: transform var(--dur) var(--ease); }
.ius-menu .menu-item-has-children:hover > a.elementor-item::after,
.ius-menu .menu-item-has-children:focus-within > a.elementor-item::after { transform: rotate(180deg); }
.ius-menu .sub-arrow { display: none; }
.ius-menu .elementor-item { transition: color var(--dur) var(--ease), padding var(--dur) var(--ease); }

/* ── Menú móvil (Header.jsx #mobile-menu) ────────────────────────── */
.ius-mmenu { visibility: hidden; transition: visibility 0s var(--dur); overflow: hidden; }
.ius-mmenu.is-open { visibility: visible; transition: none; }
.ius-mm-velo { opacity: 0; transition: opacity var(--dur) var(--ease); cursor: pointer; }
.ius-mmenu.is-open .ius-mm-velo { opacity: 1; }
.ius-mm-panel { transform: translate3d(100%, 0, 0); transition: transform var(--dur) var(--ease); height: 100vh; height: 100dvh; overflow: hidden; }
.ius-mm-panel > nav.ius-mm-item { overflow-y: auto; min-height: 0; }
.ius-mmenu.is-open .ius-mm-panel { transform: none; }
.ius-mm-nav .elementor-nav-menu > li { opacity: 0; transform: translate3d(16px, 0, 0); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.ius-mmenu.is-open .ius-mm-nav .elementor-nav-menu > li { opacity: 1; transform: none; transition-delay: calc((var(--i, 0) + 1) * var(--stagger)); }
.ius-mm-abrir, .ius-mm-cerrar { cursor: pointer; }
.ius-mm-nav .sub-arrow { display: none; }
@media (min-width: 1025px) { .ius-mmenu { display: none !important; } }

/* ── Redes flotantes (FloatingSocial.jsx) ────────────────────────── */
.ius-fs-item { opacity: 0; transform: translate3d(0, 12px, 0) scale(0.9); pointer-events: none; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.ius-fs.is-open .ius-fs-item { opacity: 1; transform: none; pointer-events: auto; transition-delay: calc(var(--i, 0) * 60ms); }
.ius-fs:not(.is-open) .ius-fs-lista { height: 0; overflow: visible; }
.ius-fs-boton { cursor: pointer; }
.ius-fs-item .elementor-icon, .ius-fs-wa .elementor-icon { transition: transform var(--dur) var(--ease); }
.ius-fs-item .elementor-icon:hover, .ius-fs-wa .elementor-icon:hover { transform: translateY(-2px); }
body.ius-menu-abierto .ius-fs { display: none; }

/* ── Catálogo: filtro y buscador en la página ────────────────────── */
.ius-oculto { display: none !important; }
.ius-sin-resultados[hidden] { display: none !important; }
.ius-pildora .elementor-button { transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }

/* Rejillas de tarjetas: todas de la misma altura y el pie de cada tarjeta
   abajo (h-full + mt-auto del React). */
.ius-loop .elementor-loop-container { align-items: stretch; }
.ius-loop .e-loop-item { height: 100%; }
.ius-loop .e-loop-item > .e-con { height: 100%; }

/* Temario: el número (01, 02…) lo pone el orden de los temas */
.ius-temario .elementor-loop-container { counter-reset: tema; }
.ius-temario .e-loop-item { counter-increment: tema; }
.ius-tema-num .elementor-heading-title::before { content: counter(tema, decimal-leading-zero); }

/* Bloques que se ocultan si su contenido dinámico viene vacío */
.ius-si-vacio-caja:not(:has(img)) { display: none; }
.ius-retrato-foto:not(:has(img[src]:not([src='']))) { display: none; }

/* ── Movimiento reducido: sin desplazamientos ni autoplay ────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; transition-delay: 0ms !important; animation: none !important; scroll-behavior: auto !important; }
  .ius-hero-slide .ln > span, .ius-hero-slide .ius-hero-fade { transform: none; opacity: 1; }
  .ius-hero-slide .ius-hero-foto { scale: 1; }
}