/* ==========================================================================
   ICI Motion System
   Personalidad: Corporate con toques Premium (confianza, inversion segura).
   - Easing firma: cubic-bezier(0.2, 0, 0, 1)
   - Duraciones: rapida 120ms / estandar 300ms / lenta 450ms
   - Entradas: subir 24px + aparecer (ease-out). Salidas: ease-in, 70%.
   Solo transform + opacity en movimiento (GPU). Respeta prefers-reduced-motion.
   ========================================================================== */

:root {
	--ici-ease: cubic-bezier(0.2, 0, 0, 1);          /* firma, 80% de los casos */
	--ici-ease-emph: cubic-bezier(0.05, 0.7, 0.1, 1); /* entradas destacadas */
	--ici-ease-in: cubic-bezier(0.3, 0, 1, 1);        /* salidas */
	--ici-ease-settle: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* asentar con leve rebote */
	--ici-ease-sine: cubic-bezier(0.37, 0, 0.63, 1);  /* ambientales en bucle */
	--ici-fast: 120ms;
	--ici-std: 300ms;
	--ici-slow: 450ms;
	--ici-shadow-rest: 0 0 0 rgba(43, 63, 95, 0);
	--ici-shadow-hover: 0 8px 18px -6px rgba(43, 63, 95, .35);
	--ici-shadow-press: 0 2px 6px -2px rgba(43, 63, 95, .35);
	--ici-ring: 0 0 0 3px rgba(0, 168, 89, .35);
}

/* ==========================================================================
   1. BOTONES (todo el sitio)
   ========================================================================== */

.btn,
button:not(.navbar-toggler):not(.btn-close):not(.owl-prev):not(.owl-next):not(.owl-dot),
input[type="submit"],
input[type="button"],
#scroll {
	position: relative;
	overflow: hidden;
	/* sustituye el "transition: all 300ms" heredado por propiedades concretas */
	transition:
		transform 180ms var(--ici-ease),
		box-shadow 180ms var(--ici-ease),
		filter 180ms var(--ici-ease),
		background-color 200ms var(--ici-ease),
		border-color 200ms var(--ici-ease),
		color 200ms var(--ici-ease);
	-webkit-tap-highlight-color: transparent;
}

/* Hover: elevacion corta (<100ms al entrar, salida mas lenta = pulido) */
.btn:hover,
button:not(.navbar-toggler):not(.btn-close):not(.owl-prev):not(.owl-next):not(.owl-dot):hover,
input[type="submit"]:hover,
input[type="button"]:hover,
#scroll:hover {
	transform: translateY(-2px);
	box-shadow: var(--ici-shadow-hover);
	transition-duration: 90ms, 90ms, 90ms, 200ms, 200ms, 200ms;
}

/* Press: hundirse 3% (anticipacion), sombra se recoge */
.btn:active,
button:not(.navbar-toggler):not(.btn-close):not(.owl-prev):not(.owl-next):not(.owl-dot):active,
input[type="submit"]:active,
input[type="button"]:active,
#scroll:active {
	transform: translateY(0) scale(.97);
	box-shadow: var(--ici-shadow-press);
	transition-duration: 60ms;
}

/* Foco visible para teclado */
.btn:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible {
	outline: none;
	box-shadow: var(--ici-ring);
}

/* El efecto antiguo .btn-animated (scale 1.05) pasa al sistema comun */
.btn-animated:hover {
	transform: translateY(-2px);
	box-shadow: var(--ici-shadow-hover);
}

/* Movimiento secundario: el icono se desplaza un poco tras el boton */
.btn i,
button i {
	display: inline-block;
	transition: transform 200ms var(--ici-ease) 30ms;
}
.btn:hover i,
button:hover i {
	transform: translateX(3px);
}
#scroll:hover i {
	transform: translateY(-3px);
}

/* Onda desde el punto de clic (capa secundaria, la crea ici-motion.js) */
.ici-ripple {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	background: currentColor;
	opacity: .28;
	transform: scale(0);
	animation: ici-ripple 500ms var(--ici-ease) forwards;
}
@keyframes ici-ripple {
	to { transform: scale(1); opacity: 0; }
}

/* Estado "enviando" en botones de formulario */
.ici-loading {
	pointer-events: none;
	filter: saturate(.85);
}
.ici-loading::after {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-left: 10px;
	vertical-align: -2px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: ici-spin 1000ms linear infinite;
}
@keyframes ici-spin {
	to { transform: rotate(360deg); }
}

/* CTA "Quiero ser Inversionista": brillo ambiental ocasional */
.ici-cta::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 60%;
	height: 100%;
	pointer-events: none;
	background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 50%, rgba(255,255,255,0) 100%);
	transform: translateX(-120%);
	animation: ici-gleam 7000ms var(--ici-ease-sine) 2500ms infinite;
}
@keyframes ici-gleam {
	0%   { transform: translateX(-120%); }
	28%  { transform: translateX(220%); }
	100% { transform: translateX(220%); }
}

/* Modales (Bootstrap): aparecer escalando 96% -> 100% */
.modal.fade .modal-dialog {
	transform: translateY(8px) scale(.96);
	transition: transform var(--ici-std) var(--ici-ease-emph), opacity var(--ici-std) var(--ici-ease);
	opacity: 0;
}
.modal.show .modal-dialog {
	transform: none;
	opacity: 1;
}
.modal-backdrop.fade {
	transition: opacity 200ms var(--ici-ease);
}

/* ==========================================================================
   2. PAGINA DE INICIO (.ici-home)
   ========================================================================== */

/* --- Hero: fondo con zoom lento (ambiental) --------------------------------- */
.ici-home .slider-banner1 {
	isolation: isolate;
	overflow: hidden;
}
/* Copia de la imagen de fondo que se puede escalar sin mover el texto */
.ici-home .slider-banner1::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: inherit;
	background-size: cover;
	background-position: center center;
	animation:
		ici-hero-in 1600ms var(--ici-ease) both,
		ici-hero-drift 22000ms var(--ici-ease-sine) 1600ms infinite alternate;
}
@keyframes ici-hero-in {
	from { transform: scale(1.08); }
	to   { transform: scale(1); }
}
@keyframes ici-hero-drift {
	from { transform: scale(1); }
	to   { transform: scale(1.05) translate3d(-1%, -1%, 0); }
}

/* --- Hero: texto y buscador (setup -> action -> resolution) ----------------- */
.ici-motion .ici-home .ici-hero-line,
.ici-motion .ici-home .ici-hero-form {
	opacity: 0;
	transform: translateY(24px);
	animation: ici-rise var(--ici-slow) var(--ici-ease-emph) forwards;
}
.ici-motion .ici-home .ici-hero-line { display: inline-block; }
.ici-motion .ici-home .ici-hero-line:nth-of-type(1) { animation-delay: 200ms; }
.ici-motion .ici-home .ici-hero-line:nth-of-type(2) { animation-delay: 300ms; }
.ici-motion .ici-home .ici-hero-form { animation-delay: 450ms; }
.ici-motion .ici-home .ici-hero-form .btn {
	animation: ici-settle 350ms var(--ici-ease-settle) 700ms backwards;
}
@keyframes ici-rise {
	to { opacity: 1; transform: none; }
}
@keyframes ici-settle {
	from { transform: scale(.94); }
	to   { transform: scale(1); }
}

/* --- Revelado al hacer scroll ----------------------------------------------- */
/* Oculto desde el primer pintado para evitar parpadeo; ici-motion.js lo revela */
.ici-motion .ici-home :is(h2.double-down-line, .living-list h3, .text-box-one .row > div,
	#pills-home .row > div, .living-list li, .icon-thumb-one, .fact-counter .count,
	.carousel-testimony):not([data-aos]):not(.is-in) {
	opacity: 0;
}
.ici-motion [data-ici-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity var(--ici-slow) var(--ici-ease),
		transform var(--ici-slow) var(--ici-ease);
	transition-delay: var(--ici-delay, 0ms);
}
.ici-motion [data-ici-reveal="left"] { transform: translateX(-24px); }
.ici-motion [data-ici-reveal="pop"]  { transform: translateY(16px) scale(.96); }
.ici-motion [data-ici-reveal].is-in {
	opacity: 1;
	transform: none;
}

/* Titulos: las lineas decorativas se dibujan despues del texto (follow-through) */
.ici-motion .ici-home h2.double-down-line[data-ici-reveal]::before,
.ici-motion .ici-home h2.double-down-line[data-ici-reveal]::after {
	transform: translateX(-50%) scaleX(0);
	transition: transform 500ms var(--ici-ease);
}
.ici-motion .ici-home h2.double-down-line[data-ici-reveal]::before { transition-delay: 150ms; }
.ici-motion .ici-home h2.double-down-line[data-ici-reveal]::after  { transition-delay: 250ms; }
.ici-motion .ici-home h2.double-down-line[data-ici-reveal].is-in::before,
.ici-motion .ici-home h2.double-down-line[data-ici-reveal].is-in::after {
	transform: translateX(-50%) scaleX(1);
}

/* "Como funciona": el numero aparece con un pequeno rebote tras la tarjeta */
.ici-motion .ici-home .icon-thumb-one[data-ici-reveal] .rounded-circle {
	transform: scale(.4);
	opacity: 0;
	transition: transform 350ms var(--ici-ease-settle), opacity 200ms var(--ici-ease);
	transition-delay: calc(var(--ici-delay, 0ms) + 200ms);
}
.ici-motion .ici-home .icon-thumb-one[data-ici-reveal].is-in .rounded-circle {
	transform: none;
	opacity: 1;
}

/* --- Hovers de la portada --------------------------------------------------- */
/* Tarjetas "Que hacemos": el icono se eleva */
.ici-home .text-box-one .flat-medium {
	display: inline-block;
	transition: transform var(--ici-std) var(--ici-ease);
}
.ici-home .text-box-one .transation-3s:hover .flat-medium {
	transform: translateY(-4px) scale(1.08);
}

/* Proyectos: tarjeta se eleva, la foto hace un zoom mas suave */
.ici-home .featured-thumb {
	transition: transform var(--ici-std) var(--ici-ease), box-shadow var(--ici-std) var(--ici-ease);
}
.ici-home .featured-thumb:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 28px -12px rgba(43, 63, 95, .35);
}
.ici-home .hover-zoomer img {
	transition: transform 700ms var(--ici-ease);
}
.ici-home .hover-zoomer:hover img {
	transform: scale(1.05);
}

/* "Como funciona": el circulo del icono responde al hover */
.ici-home .icon-thumb-one i {
	transition: transform var(--ici-std) var(--ici-ease), background-color var(--ici-std) var(--ici-ease), color var(--ici-std) var(--ici-ease);
}
.ici-home .icon-thumb-one:hover i {
	transform: translateY(-4px);
	background-color: var(--theme-primary-color, #00A859);
	color: #fff !important;
}

/* Equipo: elevacion en vez de solo escalar */
.ici-home .zoom-effect {
	transition: transform var(--ici-std) var(--ici-ease);
}
.ici-home .zoom-effect:hover {
	transform: translateY(-4px) scale(1.02);
}

/* ==========================================================================
   3. MOVIMIENTO REDUCIDO
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.btn, button, input[type="submit"], input[type="button"], #scroll,
	.btn:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover, #scroll:hover,
	.btn:active, button:active, input[type="submit"]:active, input[type="button"]:active,
	.btn i, button i,
	.ici-home .featured-thumb, .ici-home .featured-thumb:hover,
	.ici-home .hover-zoomer img, .ici-home .hover-zoomer:hover img,
	.ici-home .zoom-effect:hover,
	.ici-home .icon-thumb-one:hover i,
	.ici-home .text-box-one .transation-3s:hover .flat-medium {
		transform: none !important;
	}
	.ici-ripple, .ici-cta::before { display: none; }
	.ici-home .slider-banner1::after { animation: none; }
	.ici-motion .ici-home .ici-hero-line,
	.ici-motion .ici-home .ici-hero-form,
	.ici-motion .ici-home .ici-hero-form .btn {
		animation: ici-fade 200ms linear forwards;
		transform: none;
	}
	.ici-motion [data-ici-reveal],
	.ici-motion [data-ici-reveal="left"],
	.ici-motion [data-ici-reveal="pop"] {
		transform: none;
		transition: opacity 200ms linear;
		transition-delay: 0ms;
	}
	.ici-motion .ici-home h2.double-down-line[data-ici-reveal]::before,
	.ici-motion .ici-home h2.double-down-line[data-ici-reveal]::after {
		transform: translateX(-50%);
		transition: none;
	}
	.ici-motion .ici-home .icon-thumb-one[data-ici-reveal] .rounded-circle {
		transform: none;
		opacity: 1;
		transition: none;
	}
	.modal.fade .modal-dialog { transform: none; transition: opacity 150ms linear; }
	.ici-loading::after { animation-duration: 2000ms; }
}
@keyframes ici-fade { to { opacity: 1; } }

/* ==========================================================================
   4. NAVEGACION (header de todo el sitio)
   ========================================================================== */

/* Enlaces del menu: solo color, rapido. Antes "all 300ms ease-in-out". */
.navbar .navbar-nav li a {
	transition: color 150ms ease, background-color 150ms ease;
}

/* Menu "Mi cuenta": nace desde su disparador (arriba-izquierda), no del centro.
   Entra en 200ms ease-out; sale mas rapido (120ms) porque el usuario ya decidio. */
.navbar .navbar-nav li > ul.dropdown-menu {
	transform-origin: top left;
	transform: translateY(-4px) scale(.96);
	transition:
		opacity 120ms var(--ici-ease-in),
		transform 120ms var(--ici-ease-in),
		visibility 0s linear 120ms;
}
.navbar .navbar-nav li:hover > ul.dropdown-menu,
.navbar .navbar-nav li:focus-within > ul.dropdown-menu,
.navbar .navbar-nav li > ul.dropdown-menu.show {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition:
		opacity 200ms var(--ici-ease),
		transform 200ms var(--ici-ease),
		visibility 0s;
}

/* Header fijo al bajar: antes animaba margin-top durante 1s (reflow en cada
   frame). Ahora se desliza con transform en 300ms. */
#header.fixed-top {
	animation: ici-header-in var(--ici-std) var(--ici-ease) both;
}
@keyframes ici-header-in {
	from { transform: translateY(-100%); }
	to   { transform: none; }
}

/* ==========================================================================
   5. TARJETAS FUERA DE LA PORTADA (Proyectos, Agentes)
   ========================================================================== */

/* Proyectos (property.php, stateproperty.php): mismo comportamiento que la portada */
.featured-thumb {
	transition: transform var(--ici-std) var(--ici-ease), box-shadow var(--ici-std) var(--ici-ease);
}
.hover-zoomer img {
	transition: transform 700ms var(--ici-ease);
}

/* Agentes: abren un modal, asi que tambien responden al presionar */
.agent {
	transition: transform var(--ici-std) var(--ici-ease), box-shadow var(--ici-std) var(--ici-ease);
	cursor: pointer;
}
.agent .img img {
	transition: transform 700ms var(--ici-ease);
}

/* Los hovers solo en dispositivos con puntero real: en movil un toque dejaba
   la tarjeta "levantada" hasta tocar otra cosa. */
@media (hover: hover) and (pointer: fine) {
	.featured-thumb:hover {
		transform: translateY(-4px);
		box-shadow: 0 14px 28px -12px rgba(43, 63, 95, .35);
	}
	.hover-zoomer:hover img { transform: scale(1.05); }
	/* -10px era demasiado para una tarjeta de 400px; -4px como el resto del sitio */
	.agent:hover {
		transform: translateY(-4px);
		box-shadow: 0 14px 28px -12px rgba(43, 63, 95, .35);
	}
	.agent:hover .img img { transform: scale(1.05); }
}
.agent:active {
	transform: scale(.98);
	transition-duration: 100ms;
}

/* ==========================================================================
   6. PANTALLAS TACTILES
   En tactil :hover se queda "pegado" tras el toque. Se anula la elevacion de
   hover pero se conserva la respuesta al presionar (:active).
   ========================================================================== */
@media (hover: none), (pointer: coarse) {
	.btn:hover:not(:active),
	button:hover:not(:active),
	input[type="submit"]:hover:not(:active),
	input[type="button"]:hover:not(:active),
	#scroll:hover:not(:active),
	.btn-animated:hover:not(:active) {
		transform: none;
		box-shadow: none;
	}
	.btn:hover i, button:hover i, #scroll:hover i { transform: none; }
	.featured-thumb:hover, .agent:hover:not(:active),
	.ici-home .featured-thumb:hover,
	.ici-home .zoom-effect:hover:not(:active),
	.ici-home .icon-thumb-one:hover i,
	.ici-home .text-box-one .transation-3s:hover .flat-medium {
		transform: none;
	}
	.hover-zoomer:hover img, .agent:hover .img img { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.navbar .navbar-nav li > ul.dropdown-menu,
	.navbar .navbar-nav li:hover > ul.dropdown-menu,
	.navbar .navbar-nav li:focus-within > ul.dropdown-menu,
	.navbar .navbar-nav li > ul.dropdown-menu.show {
		transform: none;
	}
	#header.fixed-top { animation: ici-fade 150ms linear both; }
	.featured-thumb:hover, .agent:hover, .agent:active,
	.hover-zoomer:hover img, .agent:hover .img img {
		transform: none !important;
	}
}

/* --- Portada: etiqueta y subtítulo entran con el titular -------------------- */
.ici-motion .ici-home .ici-hero .ici-eyebrow,
.ici-motion .ici-home .ici-hero-lead {
	opacity: 0;
	transform: translateY(24px);
	animation: ici-rise var(--ici-slow) var(--ici-ease-emph) forwards;
}
.ici-motion .ici-home .ici-hero .ici-eyebrow { animation-delay: 120ms; }
.ici-motion .ici-home .ici-hero-lead { animation-delay: 380ms; }
@media (prefers-reduced-motion: reduce) {
	.ici-motion .ici-home .ici-hero .ici-eyebrow,
	.ici-motion .ici-home .ici-hero-lead {
		opacity: 1;
		transform: none;
		animation: none;
	}
}
