/* ==========================================================================
   Vita Soluciones — animaciones y detalles de diseño
   Colores y tipografías viven en theme.json; aquí solo lo que los bloques
   no pueden expresar por sí mismos (movimiento, posiciones, efectos).
   ========================================================================== */

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
:where(.wp-site-blocks) > * { margin-block-start: 0; }

/* ---------- Encabezado fijo ---------- */
.vita-header {
	position: sticky;
	top: 0;
	z-index: 50;
	backdrop-filter: saturate(1.2) blur(6px);
}
.admin-bar .vita-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .vita-header { top: 46px; } }
.vita-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.5rem;
}
.vita-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 700;
	font-size: 1.25rem;
	padding: 0.6rem 0;
}

/* ---------- Animaciones base ---------- */
@keyframes vitaFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes vitaFloatS { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes vitaBlob { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(40px, -30px) scale(1.12); } 66% { transform: translate(-30px, 25px) scale(0.92); } }
@keyframes vitaSpin { to { transform: rotate(360deg); } }
@keyframes vitaMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes vitaPulse { 0% { box-shadow: 0 0 0 0 rgba(124, 196, 86, 0.55); } 70% { box-shadow: 0 0 0 16px rgba(124, 196, 86, 0); } 100% { box-shadow: 0 0 0 0 rgba(124, 196, 86, 0); } }
@keyframes vitaTravel { from { left: 0%; } to { left: 100%; } }
@keyframes vitaUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

.vita-up { animation: vitaUp 0.9s ease-out both; }

/* ---------- Hero ---------- */
.vita-hero { position: relative; overflow: hidden; }
.vita-hero .wp-block-cover__inner-container { position: relative; z-index: 2; }
.vita-hero::before,
.vita-hero::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	z-index: 1;
	pointer-events: none;
	animation: vitaBlob 18s ease-in-out infinite;
}
.vita-hero::before {
	width: 520px; height: 520px; top: -160px; right: 8%;
	background: radial-gradient(circle, rgba(42, 111, 214, 0.5), rgba(42, 111, 214, 0) 70%);
}
.vita-hero::after {
	width: 460px; height: 460px; bottom: -200px; left: -80px;
	background: radial-gradient(circle, rgba(124, 196, 86, 0.28), rgba(124, 196, 86, 0) 70%);
	animation-delay: -7s;
}

.vita-hero-visual {
	position: relative;
	min-height: 480px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.vita-hero-visual::before {
	content: "";
	position: absolute;
	width: 420px; height: 420px;
	border-radius: 50%;
	border: 2px dashed rgba(124, 196, 86, 0.65);
	animation: vitaSpin 40s linear infinite;
}
.vita-hero-visual::after {
	content: "";
	position: absolute;
	width: 376px; height: 376px;
	border-radius: 50%;
	background: conic-gradient(from 200deg, #1549A1, #2E7D43, #DCEB5C, #1549A1);
	opacity: 0.9;
}
.vita-hero-visual .vita-hero-foto {
	position: relative;
	z-index: 1;
	margin: 0;
	animation: vitaFloat 6s ease-in-out infinite;
}
.vita-hero-visual .vita-hero-foto img {
	width: 360px; height: 360px;
	object-fit: cover;
	object-position: 62% 50%;
	border-radius: 50%;
	border: 6px solid #0B1F4A;
	box-shadow: 0 40px 70px -20px rgba(0, 0, 0, 0.7);
}
.vita-chip {
	position: absolute;
	z-index: 2;
	margin: 0 !important;
	border-radius: 14px;
	padding: 0.6rem 1rem !important;
	font-weight: 600;
	font-size: 0.875rem;
	line-height: 1.3;
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3);
	white-space: nowrap;
	animation: vitaFloatS 5s ease-in-out infinite;
}
.vita-chip--1 { top: 40px; left: 0; }
.vita-chip--2 { top: 110px; right: -6px; animation-delay: -1.5s; }
.vita-chip--3 { bottom: 96px; left: -10px; animation-delay: -3s; }
.vita-chip--4 { bottom: 34px; right: 20px; animation-delay: -2.2s; }

.vita-checks p { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.vita-checks p::before {
	content: "";
	flex: none;
	width: 18px; height: 18px;
	background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DCEB5C' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

/* ---------- Banda de tecnologías en movimiento ---------- */
.vita-marquee { overflow: hidden; }
.vita-marquee p {
	display: inline-block;
	white-space: nowrap;
	margin: 0;
	padding-right: 3.5rem;
	animation: vitaMarquee 28s linear infinite;
}

/* ---------- Tarjetas ---------- */
.vita-card {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	overflow: hidden;
}
.vita-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 24px 48px -16px rgba(11, 31, 74, 0.35);
}
.vita-card > .wp-block-image:first-child { margin: 0; }
.vita-card > .wp-block-image:first-child img {
	width: 100%;
	height: 170px;
	object-fit: cover;
	display: block;
}
.vita-icono { flex: none; width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.vita-icono svg { width: 24px; height: 24px; }
.vita-icono-circulo { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto; animation: vitaPulse 2.4s ease-out infinite; }
.vita-icono-circulo svg { width: 30px; height: 30px; }
.vita-numero { width: 48px; height: 48px; border-radius: 50%; display: flex !important; align-items: center; justify-content: center; margin: 0; }

/* Lista con check de color */
.vita-lista { list-style: none; padding-left: 0; }
.vita-lista li { position: relative; padding-left: 1.9rem; margin-bottom: 0.6rem; }
.vita-lista li::before {
	content: "";
	position: absolute; left: 0; top: 0.2em;
	width: 18px; height: 18px;
	background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231549A1' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.vita-lista--lima li::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DCEB5C' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

/* ---------- Continuidad: línea con punto que avanza ---------- */
.vita-recorrido { position: relative; }
.vita-recorrido::before {
	content: "";
	position: absolute;
	left: 10%; right: 10%; top: 32px;
	height: 3px;
	background: rgba(255, 255, 255, 0.35);
	border-radius: 3px;
}
.vita-recorrido::after {
	content: "";
	position: absolute;
	top: 27px;
	width: 13px; height: 13px;
	border-radius: 50%;
	background: #DCEB5C;
	box-shadow: 0 0 14px #DCEB5C;
	margin-left: 10%;
	animation: vitaTravel 4s linear infinite;
	max-width: 80%;
}
.vita-recorrido > .wp-block-column { position: relative; z-index: 1; }

/* Fondos con foto: imágenes decorativas sin sobresalir */
.vita-fondo-foto { position: relative; overflow: hidden; }

/* ---------- Botones ---------- */
.wp-block-button__link { transition: transform 0.2s ease, filter 0.2s ease; }
.wp-block-button__link:hover { transform: translateY(-2px); filter: brightness(1.06); }
.is-style-outline .wp-block-button__link { background: transparent !important; }

/* ---------- Formulario de contacto ---------- */
.vita-formulario form {
	background: #FFFFFF;
	color: #1F2937;
	border-radius: 20px;
	padding: 2rem;
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5);
}
.vita-formulario label {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: #0B1F4A;
}
.vita-formulario__fila { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.vita-formulario__fila > label { flex: 1 1 200px; }
.vita-formulario input[type="text"],
.vita-formulario input[type="email"],
.vita-formulario input[type="tel"],
.vita-formulario select,
.vita-formulario textarea {
	font: inherit;
	font-weight: 400;
	font-size: 1rem;
	padding: 0.75rem 0.9rem;
	border: 1px solid #C9CEC8;
	border-radius: 10px;
	background: #FFFFFF;
	color: #1F2937;
}
.vita-formulario textarea { resize: vertical; }
.vita-formulario :focus-visible { outline: 3px solid #7CC456; outline-offset: 2px; }
.vita-formulario__check { flex-direction: row !important; align-items: flex-start; gap: 0.6rem !important; font-weight: 400 !important; color: #374151 !important; }
.vita-formulario__check input { margin-top: 0.25rem; width: 18px; height: 18px; flex: none; }
.vita-formulario__boton {
	font: inherit;
	font-weight: 600;
	font-size: 1.0625rem;
	background: linear-gradient(135deg, #1549A1, #2E7D43);
	color: #FFFFFF;
	border: 0;
	border-radius: 999px;
	padding: 1rem 1.5rem;
	cursor: pointer;
	transition: transform 0.2s ease, filter 0.2s ease;
}
.vita-formulario__boton:hover { transform: translateY(-2px); filter: brightness(1.08); }
.vita-formulario__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.vita-aviso { border-radius: 12px; padding: 0.9rem 1.1rem; font-weight: 600; margin: 0 0 1rem; }
.vita-aviso--ok { background: #EAF6EC; color: #1E5A30; }
.vita-aviso--error { background: #FDECEC; color: #8A1C1C; }

/* ---------- Barra fija de contacto (solo celular) ---------- */
.vita-barra-movil { display: none; }
@media (max-width: 781px) {
	.vita-barra-movil {
		display: flex;
		position: fixed;
		left: 0; right: 0; bottom: 0;
		z-index: 60;
		margin: 0 !important;
		box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.25);
	}
	.vita-barra-movil .wp-block-button { flex: 1; }
	.vita-barra-movil .wp-block-button__link { width: 100%; }
	body { padding-bottom: 76px; }
}

/* ---------- Ajustes para celular ---------- */
@media (max-width: 781px) {
	.vita-hero-visual { min-height: 340px; }
	.vita-hero-visual::before { width: 300px; height: 300px; }
	.vita-hero-visual::after { width: 268px; height: 268px; }
	.vita-hero-visual .vita-hero-foto img { width: 256px; height: 256px; border-width: 5px; }
	.vita-chip { font-size: 0.8125rem; padding: 0.5rem 0.75rem !important; }
	.vita-chip--1 { top: 12px; left: 0; }
	.vita-chip--2 { display: none; }
	.vita-chip--3 { display: none; }
	.vita-chip--4 { bottom: 16px; right: 0; }
	.vita-recorrido::before, .vita-recorrido::after { display: none; }
	.vita-hero::before { width: 320px; height: 320px; right: -120px; top: -120px; }
	.vita-hero::after { width: 300px; height: 300px; left: -120px; }
	.vita-formulario form { padding: 1.25rem; }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	html { scroll-behavior: auto; }
}

/* Botón del encabezado solo en escritorio (en celular está la barra fija) */
@media (max-width: 781px) { .vita-solo-escritorio { display: none !important; } }
.vita-logo { margin: 0; }
.vita-logo img { display: block; height: auto; }

/* Etiquetas tipo píldora: solo el ancho del texto */
.vita-etiqueta { width: fit-content; max-width: 100%; }
/* Tarjetas verticales: los hijos ocupan todo el ancho */
.vita-card.is-vertical { align-items: stretch !important; }
.vita-card.is-vertical > .vita-etiqueta { align-self: flex-start; }
.vita-card > .wp-block-image { width: 100%; }

.vita-recorrido > .wp-block-column { text-align: center; }
.vita-card.is-vertical > .vita-numero { align-self: flex-start; width: 48px; }
.wp-block-buttons.vita-barra-movil { display: none; }
@media (max-width: 781px) { .wp-block-buttons.vita-barra-movil { display: flex; } }
.vita-numero { padding: 0 !important; width: 48px !important; height: 48px; flex: none; }
.vita-chip { width: max-content; max-width: none; }
.vita-hero-visual .vita-hero-foto { width: 360px; max-width: 100%; }
@media (max-width: 781px) { .vita-hero-visual .vita-hero-foto { width: 256px; } }